Javascript D3地图-从悬停中排除多边形

在我的后续工作中，我正在尝试适应我的需要，这是一个伟大的地图（使用它），并在悬停时打开一个自定义工具提示

我想排除在某些州徘徊的可能性

我希望它们出现在地图上，但显示为灰色且无响应

如果我使用的是

svg路径

，我会为带有悬停的多边形/状态定义一个不同的css

类

，而只为无响应的状态定义一个不同的类

在这种情况下，我不知道如何将路径封装在变量（）中

---

首先，您需要一种方法来判断给定状态是灰色还是活动状态。直接的方法是在数据中添加一个

active

字段，该字段可以是

true

或

false

然后，像以前一样绘制地图（使用

uStates.draw

）。之后，可以将非活动状态绘制为灰色，并按如下方式删除mouseover和mouseout事件：

  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

---

首先，您需要一种方法来判断给定状态是灰色还是活动状态。直接的方法是在数据中添加一个

active

字段，该字段可以是

true

或

false

然后，像以前一样绘制地图（使用

uStates.draw

）。之后，可以将非活动状态绘制为灰色，并按如下方式删除mouseover和mouseout事件：

  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

---

您可以调整文件uStates.js以实现所需的功能。创建

draw（）

方法的副本并应用一些更改：

• 传递要“禁用”的状态ID列表
• 如果状态ID在列表中，请使用“禁用的灰色”，而不是使用定义的

  填充

• 在事件控制器中，检查状态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);
} 

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

---

您可以调整文件uStates.js以实现所需的功能。创建

draw（）

方法的副本并应用一些更改：

• 传递要“禁用”的状态ID列表
• 如果状态ID在列表中，请使用“禁用的灰色”，而不是使用定义的

  填充

• 在事件控制器中，检查状态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);
} 

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

---

非常感谢您的回复和回答！非常感谢您的回复和回答！