javascript - d3 版本 4，我正在尝试根据类进行有条件的鼠标悬停

Question

我试图让这个鼠标悬停有条件。如果“selected”类存在则返回鼠标悬停函数这是代码:

.on("mouseover", function() { if(d3.select(this).classed("selected")) {
return ""}
else{
return mouseover}
})

提前致谢

Answer 1

在我看来，您想根据类调用 mouseover 函数。如果这是正确的，您只需要做:

.on("mouseover", function() {
    if (d3.select(this).classed("selected")) {
        mouseover()
    }
 })

或者，或者:

selection.selectAll(".selected").on("mouseover", mouseover)

这是一个演示。第一个圈子没有类，第二个圈子有:

var svg = d3.select("svg");
svg.selectAll(null)
  .data([1, 1])
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("r", 20)
  .attr("cx", function(d, i) {
    return 100 + 100 * i
  })
  .classed("selected", function(d, i) {
    return i
  })
  .on("mouseover", function() {
    if (d3.select(this).classed("selected")) {
      mouseover()
    }
  })

function mouseover() {
  console.log("mouse over")
}

<script src="//d3js.org/d3.v4.min.js"></script>
<svg></svg>