使用onclick可以隱藏其他路徑嗎？

-1

我有一個topojson文件看起來像以下（這裏只有一個表示「節點」）：使用onclick可以隱藏其他路徑嗎？

{ 
"type":"Polygon", 
"properties":{ 
"OBJECTID":156, 
"geoid10_1":360610009001000, 
"ALAND10": 0, 
"AWATER10": 16690, 
"latitude":40.7055747, 
"longitude":-74.010762, 
"cnt_client":5, 
"blocks_lis":"360610050004001|360593025011000|360610065001005", 
"Shape_Leng":0.00507281682202, 
"Shape_Area":0.000001463445362 
}, 
"arcs":[ 
[ 
    671, 
    672, 
    673, 
    674 
] 
] 
}

，並顯示在地圖上的曼哈頓街區，cnt_client值後着色。當地圖載入艾利塊從白色時顯示cnt_client爲0〜dark_blue當其10.

是否有可能有一個上點擊功能，做： 1）保持塊卡嗒一聲顯示爲是 2）保留block_lis中的塊（每個塊都有一個geoid10_1標識符） 3）隱藏所有其他塊

？

pathes 
       .data(topojson.feature(geodata,geodata.objects.collection).features) 
       .enter() 
       .append("path") 
       .attr("d",path) 
       .style("fill", function(d){ return color(d.properties.cnt_client); }) 
       .style("stroke", "white") 
       .style("stroke-width", "0.7") 
       .on('mouseover', tip.show) 
       .on('mouseout', tip.hide) 
       .on("click", function(d) { 

        ??? 

       }

來源

2016-04-28 user3700389

肯定，但你的代碼在哪裏？ – Fabricator

它似乎消失了，當我編輯我的問題。讓我把它放回 – user3700389

是否每個路徑都將他們的'geoid10_1'值賦值爲一個id？ – Mark

首先分配給每個路徑都有其獨特的geoid10_1值作爲id。然後你可以使用一個CSS不選擇：

.on("click", function(d) { 
    // show everyone 
    d3.selectAll('path') 
    .style('opacity', 1); 
    // find the ids of ones to continue to show 
    var notIds = [d.geoid10_1].concat(d.blocks_lis.split("|")), 
     cssSelector = "path"; 
    // build a css selector string 
    notIds.forEach(function(d1){ 
    cssSelector += ':not([id="' + d1 + '"])'; 
    }); 
    // hide those NOT in our list 
    d3.selectAll(cssSelector) 
    .style("opacity", 0);  
});

這裏是展示其隱藏大家除外的點擊一個和下一個的方法一些代碼：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <style> 
 
     path { 
 
     stroke: steelblue; 
 
     stroke-width: 10px; 
 
     } 
 
    </style> 
 
    </head> 
 

 
    <body> 
 
    <svg width="300" height="300"> 
 
     <path id="1" d="M0,0L200,200"></path> 
 
     <path id="2" d="M0,0L150,200"></path> 
 
     <path id="3" d="M0,0L100,200"></path> 
 
     <path id="4" d="M0,0L050,200"></path> 
 
    </svg> 
 
    <script> 
 
     
 
     d3.selectAll('path') 
 
     .data([{},{},{},{}]) 
 
     .on('click', function(d){ 
 
     
 
      console.log(d); 
 
     
 
      d3.selectAll('path') 
 
      .style('opacity', 1); 
 
     
 
      if (d.toggle) { 
 
      d.toggle = false; 
 
      return; 
 
      } 
 
     
 
      var self = d3.select(this), 
 
       id = +self.attr('id'), 
 
       nId = (id < 4) ? id + 1 : 1; 
 
       
 
      d3.selectAll('path:not([id="' + id + '"]):not([id="' + nId + '"])') 
 
      .style('opacity', 0); 
 
     
 
      d.toggle = true; 
 
      
 
     }) 
 
     
 
    </script> 
 
    </body> 
 

 
</html>

來源

2016-04-28 18:30:09 Mark

謝謝MArk這個非常詳細的答案。我修改了一些代碼以適應它：我將'd.geoid10_1'改爲'd.properties.geoid10_1'和'd.blocks_lis'爲'd.properties.blocks_lis'。我也將'.style（'opacity'，0）'改成'.style（「fill」，「white」）;'所以隱藏塊會像地圖的其餘部分一樣變白，因此變得'隱藏'。現在從你的代碼試圖解決的問題是，一旦點擊一切消失，而不是保持notIds列表顯示。 – user3700389

好吧我想通了，我添加了一個id值的所有pattes，所以它可以理解你的ID列表：'.attr（「id」，函數（d）{返回d.properties.geoid10_1;}）' – user3700389

後續問題，如果我可能：一旦點擊只有幾塊仍然出現在地圖上（這是好的），然後如果我點擊其中一個（如第二次點擊），它不會'重新激活'隱藏塊應該現在出現（因爲在我的第二位點擊列表中）。有沒有辦法讓新的區塊列表出現？ – user3700389

使用onclick可以隱藏其他路徑嗎？

回答

相關問題