javascript - 用 d3.js 替换 jQuery 的最后一点 - 带有 css-attribute 更改的选择

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;" ...>可能导致您的问题。