D3地图-将多边形从悬停中排除 [英] D3 map - excluding a polygon from hovering

问题描述

在我的上一个问题的后续行动中，我正在尝试采用满足我的需要，这幅地图的示例(与此

In a follow up to my previous question I am trying to adopt to my needs this great example of a map (working with this dataset) and opening a custom tooltip upon hovering.

我想将鼠标悬停在某些州之外.

I would like to exclude from hovering some states.

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

I want them to appear on a map but as gray and non-responsive.

如果我正在使用svg path，我将为具有悬停的多边形/状态定义不同的css class，并为无响应的类别定义不同的类.

If I were working with svg path I would define a different css class for polygons/states with hovering and a different class just for the non-responsive.

在我的路径封装在变量中的情况下，我不知道该怎么做(

I don't know how to do it in this case where my paths are encapsulated in a variable (dataset).

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

推荐答案

您可以调整文件uStates.js来实现所需的功能.创建draw()方法的副本并应用一些更改:

You can tweak the file uStates.js to achieve what you want. Create a duplicate of the draw() method and apply some changes:

• 传递要禁用"的状态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);
} 

然后调用您自己的个性化的drawSpecial方法，而不是调用draw方法.例如，如果您想使用与链接的教程类似的代码，禁用德克萨斯州(TX)和佛蒙特州(VT)，您可以像下面这样调用该函数:

Then instead of calling the draw method, call your own personlized drawSpecial method. For example, in a similar code to the one found in the tutorial you linked, if you want to disable Texas (TX) and Vermont (VT), you'd call the function like this:

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

这篇关于D3地图-将多边形从悬停中排除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！