d3.js从条形图中选择一个条形

Question

我在d3.js中有一个条形图，并希望在调用函数时更改一个条形图的颜色。我有一个功能，当我调用它时，整个条形图改变了颜色。这是函数中的内容：

d3.selectAll(".barD").style("fill", "orange");

这会更改所有条形图的颜色，这是非常合理的，因为所有条形图都分配了“barD”类。但是我怎么才能只改变一个酒吧的颜色。我可以根据其中的一个选择一个条形。命名

Answer 1

在这种情况下，您可能希望过滤选择而不是明确地进行子选择：

d3.selectAll(".barD")
  .filter(function(d) { return d.name == "someName"; })
  .style("fill", "orange");

您还可以将相关栏的数据与选择匹配并按以下方式进行过滤：

d3.selectAll(".barD")
  .data([datumForBar], function(d) { return d.name; })
  .style("fill", "orange");

如果你从其中一个栏的事件处理程序中调用所述函数（例如点击），请记住当前元素也可以在this变量中使用，你可以简单地执行

d3.select(this).style("fill", "orange");