javascript - 将 jQuery 的最后一位替换为 d3.js - 更改 css 属性的选择

Question

这是代码中 jQuery 的最后一点 - 像这样一切正常:

var colourchange = function () {
  var my_selection = d3.select(this);
  var selection_class = my_selection.attr("class");

  $("." + selection_class)
    .css("fill", "yellow");
};

为了避免使用 jQuery 库(仅针对这一行!)，我尝试将其替换为 d3.js 代码 - 无论如何，这是代码的主要部分。这是我得到的:

var colourchange = function () {
  var my_selection = d3.select(this);
  var selection_class = my_selection.attr("class");

  d3.selectAll("." + selection_class)
    .attr("fill", "yellow");
};

但它就是行不通。我很确定我错过了一些非常明显的东西。

编辑:也许我应该提到我如何调用这个函数......

<d3 - selection>
    .data(my_data)
    .enter().append("rect")
    .attr(...) etc.
    .on("mouseover", colourchange)

该函数的效果应该应用于鼠标悬停的元素以及具有相同类的其他一些元素。

Answer 1

我会改变.attr("fill", "yellow")至.style("fill", "yellow")

使用 .attr() 会产生 <rect fill="yellow" ...>而不是<rect style="fill: yellow;" ...>这可能会导致您的问题。