javascript - d3 javascript 单击一行以更改线条颜色 - 更改所有行

Question

我有一个力导向图，我想在单击该线时更改 2 个节点之间的线的颜色。然而，下面的代码改变了所有线条的颜色，而不仅仅是我点击的那一行。

我的行和点击行的 css 是:

.link {
  fill: none;
  stroke: #666;
  stroke-width: 2px;
  cursor: pointer;
}

.link--clicked {
  fill: none;
  stroke: red;
  stroke-width: 2px;
  cursor: pointer;
}

我在点击该行时调用了一个函数:

var path = svg.append("g").selectAll("path")
    .data(force.links())
    .enter().append("path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
    .on("click", function(d) { edge_clicked(d); });

function edge_clicked(d) {    
  d3.select("path").classed("link--clicked", false); //remove color class of any previously clicked link
  var clicked = d3.select(this); //select clicked element
  path.classed("link--clicked", true); //set class of clicked link
}

我怀疑这与我调用 path.classed 命令的方式有关，它影响所有路径/线，而不仅仅是单击的线。但是，我无法弄清楚所选行的语法。

感谢任何帮助。

Answer 1

Gerardo Furtado 在他的 answer 中已经解决了主要缺点，即范围问题和未使用 selectAll。尽管 Gerardo 的回答是正确的，但我认为采用不同的方法可能会清理代码和思想。

没有必要将匿名函数作为单击事件的处理程序，它只会调用另一个函数。直接将函数 edge_clicked 作为事件处理程序传递将解决范围问题。

var path = svg.append("g").selectAll("path")
    .data(force.links())
    .enter().append("path")
        .attr("class", function(d) { return "link " + d.type; })
        .attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
        .on("click", edge_clicked);      // Just pass in the handler function

在这种情况下，处理函数中的 this 将引用被单击的元素。就个人而言，我也会为这个函数选择一个不同的实现，它看起来更干净并且运行速度应该稍微快一些，因为只需要一个选择而不是两个:

function edge_clicked() {    
  var clicked = this;         // Remember the element clicked upon
  d3.selectAll("path").classed("link--clicked", function() {
    return clicked === this;  // Assign class for clicked element, else unassign class
  });
}

这将使用一个闭包来保存 this 的值，即被点击的元素，在 clicked 中使其在 .classed( )。然后，它选择并遍历所有 path，仅将类分配给 clicked 元素，同时取消分配给任何其他元素。