如何在鼠标悬停时突出显示功能？

Question

我正在使用D3制作一张地图，并试图给它添加一些动态高亮显示。例如，当你将鼠标移到某些特征上时，边框会改变颜色/粗细。我正在使用以下代码来尝试实现这一点：

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’”。我如何才能改变这一点，使其高亮显示？

Answer 1

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

因此，不是：

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

它应该是：

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

或者甚至更短：

  .on("mouseover", highlight);

最后，由于您没有共享setLabel函数，我不知道它是否需要一个属性或整个数据。因此，您必须相应地更改这一点。