D3突出显示所选状态

Question

我有两个svg个。一个是美国各州的地图，一个是这些州的散点图。

我的目标是实现突出显示功能，因此如果用户点击svg中的一个状态，则svg上的状态会发生变化（较暗等）。

目前我有一个svg设置如下，带有高亮功能。但是，点击后，控制台会报告TypeError: d is undefined。有什么想法或建议吗？

  var states = svg.append("g").append("g")
  .attr("id", "states")
    .selectAll("path")
      .data(states_features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { return color(d.properties.urm1200app / d.properties.urm1200); })
      .attr("stroke", "#868686")
      .attr("stroke-width", "1px")
      .attr("opacity", .73)
      .on("click", function(d) { return highlight(d.properties.stateabbr); });

function highlight(abbr) {
    svg.selectAll("#states").attr("opacity", function(p) {
        var opa;
        if (p.properties.stateabbr == abbr){
            opa = 1;
            } else {
            opa = .73; }
            return opa;});
}