Question

在跟进我的previous question后，我正在尝试采用这个很棒的example地图（使用此dataset）并在悬停时打开自定义工具提示。

我想排除一些州的徘徊。

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

如果我正在使用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

首先，您需要一种方法来说明给定状态是灰色还是活动状态。直接的方法是在数据中添加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

Answer 2

您可以调整文件uStates.js以实现您想要的效果。创建draw()方法的副本并应用一些更改：

传递您想要的状态ID列表＆＃34;禁用＆＃34;。
如果状态的ID在列表中，而不是使用定义的fill，请使用＆＃34;禁用灰色＆＃34;颜色。
在事件控制器中，检查状态ID是否在列表中;如果是，则不要应用更改（因为状态将是＆＃34;禁用＆＃34;）。

功能如下：

// 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方法，而是调用您自己的个人化drawSpecial方法。例如，在与tutorial you linked中的代码类似的代码中，如果要禁用Texas（TX）和Vermont（VT），则可以调用此函数：

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

D3地图 - 从悬停

2 个答案: