如何在鼠标悬停时突出显示功能? [英] How to highlight features on mouseover?

问题描述

我正在使用D3制作地图，并尝试向其中添加一些动态突出显示.例如，当您将鼠标悬停在某些功能上时，边框会更改颜色/粗细.我正在使用以下代码来尝试完成此任务:

I am making a map using D3 and am trying to add some dynamic highlighting to it. Ex., when you mouseover certain features, the border changes color/weight. I'm using the following code to try to accomplish this:

function setEnumerationUnits(manhattan, map, path, colorScale){

    //add Manhattan NTAs to map
    var manhattan = map.selectAll(".manhattan")
        .data(manhattan)
        .enter()
        .append("path")
        .attr("class", function(d){
            return "manhattan " + d.properties.ntacode;
        })
        .attr("d", path)
        .style("fill", function(d){
            return choropleth(d.properties, colorScale);
        })
        .on("mouseover", function(d){
            highlight(d.properties);
        });

    //add style descriptor to each path
    var desc = manhattan.append("desc")
        .text('{"stroke": "#000", "stroke-width": "0.5px"}');
};

. .

//function to highlight enumeration units and bars
function highlight(props){
    //change stroke
    var selected = d3.selectAll("." + props.ntaname)
        .style({
            "stroke": "blue",
            "stroke-width": "2"
        });
    setLabel(props);
};

当我刷"功能时，我希望看到它们被概述，但是没有运气.当我查看控制台时，出现类型错误，提示无法读取null的属性'style'和"无法读取null的属性'html'".我该如何更改以使突出显示?

I'm expecting to see features being outlined when I "brush" over them, but no luck. When I look at the console, I get type errors saying, "cannot read property 'style' of null" and "cannot read property 'html' of null". How can I change this so that the highlight shows up?

推荐答案

您必须将整个基准传递给highlight函数，而不仅仅是单个属性.

You have to pass the whole datum to the highlight function, not only a single property.

所以，而不是:

  .on("mouseover", function(d){
      highlight(d.properties);
  });

应该是:

  .on("mouseover", function(d){
      highlight(d);
  });

或更短:

  .on("mouseover", highlight);

最后，由于您没有共享setLabel函数，因此我不知道它是否需要属性或整个基准面.因此，您必须相应地进行更改.

Finally, since you didn't share the setLabel function, I don't know if it requires a property or the whole datum. Therefore, you have to change that accordingly.

这篇关于如何在鼠标悬停时突出显示功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！