javascript - 更改类属性

Question

D3 学习者在这里。我正在尝试选择具有特定类的所有元素(比如说“移动”)，在其中一些元素上触发一些事件(当点击颜色发生变化时)。现在我想为那些触发事件的元素(比如“hasmoved”)分配一个新类，即点击哪些元素

这是我的试用版。但是没用

d3.selectAll(".move")               
.on("click", function() {
d3.select(this)
           .classed("hasmoved",true) 
          .style("fill","rgba(48,63,43,0.5)")
    .attr("transform",'translate(700)')})


d3.selectAll(".hasmoved")
.on("click", function() {
        d3.select(this)    
        .style("fill","pink")})

Answer 1

适当的缩进会有所帮助:

d3.selectAll(".move")
  .on("click", function() {
    d3.select(this)
      .classed("hasmoved", true)
      .style("fill", "rgba(48,63,43,0.5)")
      .attr("transform", 'translate(700)')
  });

d3.selectAll(".hasmoved")
  .on("click", function() {
    d3.select(this)
      .style("fill", "pink")
  });

正如我们所见，d3.selectAll(".hasmoved").on(//etc... block 在第一个 on 方法之外。因此, 该 block 将立即运行，在任何地方都没有 hasmoved 类的时刻，因为用户还没有点击任何东西。

更简单的解决方案是为每个点击的元素设置 on 方法:

d3.selectAll(".move")
  .on("click", function() {
    d3.select(this)
      .classed("hasmoved", true)
      .style("fill", "rgba(48,63,43,0.5)")
      .attr("transform", 'translate(700)')
      .on("click", function() {
        d3.select(this)
          .style("fill", "pink")
      });
  });