D3地圖 - 從徘徊

Question

在跟進我previous question我想通過我的需要的地圖（這個dataset工作），並在徘徊打開自定義工具提示的這個偉大example排除多邊形。

我想排除一些州懸停。

我希望它們出現在地圖上，但是灰色且無響應。

如果我用svg path工作，我會定義與懸停和不同類只爲無響應的多邊形/狀態的不同的CSS class。

我不知道如何做到這一點，我的路徑封裝在一個變量（dataset）。

function(){ 
var uStatePaths={id:"HI",n:"Hawaii",d:"M233.08751,(...),554.06663Z"}, (...) 
{id:"VT",n:"Vermont",d:"M844.48416,(...),154.05791Z"}, (...) 

Answer 1

你可以調整文件uStates.js達到你想要的東西。創建draw()方法的副本並應用一些更改：

• 傳遞您希望「禁用」的狀態ID的列表。
• 如果狀態的ID在列表中，而不是使用定義的fill，請使用「灰色禁用」顏色。
• 在事件控制器中，檢查狀態ID是否在列表中;如果是，則不要應用更改（因爲狀態將「禁用」）。

功能會是這樣的：

// notice the new parameter "list" that will contain the disabled states 
uStates.drawSpecial = function(id, data, toolTip, list){   

    function mouseOver(d){ 
     // only show the tooltip if the state is not in the disabled list 
     if (list.indexOf(d.id) < 0) { 
     d3.select("#tooltip").transition().duration(200).style("opacity", .9);  
     d3.select("#tooltip").html(toolTip(d.n, data[d.id])) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 28) + "px"); 
     } 
    } 

    function mouseOut(){ 
     d3.select("#tooltip").transition().duration(500).style("opacity", 0);  
    } 

    d3.select(id).selectAll(".state") 
     .data(uStatePaths) 
     .enter() 
     .append("path") 
     .attr("class","state") 
     .attr("d",function(d){ return d.d;}) 
     // if the state id is in the list, select gray instead of the state color 
     .style("fill",function(d){ return list.indexOf(d.id) >= 0 ? "#dddddd" : data[d.id].color; }) 
     .on("mouseover", mouseOver).on("mouseout", mouseOut); 
} 

然後，而不是調用draw方法，調用自己的personlized drawSpecial方法。例如，在一個類似的代碼在tutorial you linked發現，如果要禁用德州（TX）和佛蒙特州（VT）的人，你會調用該函數是這樣的：

uStates.draw("#statesvg", sampleData, tooltipHtml, ['TX', 'VT']); 

Answer 2

首先，您需要一種方式來說明給定狀態是灰色還是活動狀態。直接的方法是在您的數據中添加一個active字段，該字段爲true或false。

然後，像以前一樣繪製地圖（使用uStates.draw）。在此之後，你可以畫在非活動狀態的灰色和刪除鼠標懸停及移出事件如下：

d3.selectAll(".state") //select all state objects 
    .filter(function(d) { return !data[d.id].active }) //keep only inactives: 
      //d.id is the state id, 
      //data[d.id] fetches your piece of data related to this state, and  
      //!data[d.id].active gives the negation of the newly created active flag 
    .style("fill", function(d){ return "#888" }) // paint in gray 
    .on("mouseover", null) //remove mouseover events 
    .on("mouseout", null); //remove mouseout events