javascript - 悬停不适用于 d3.js 中同一类的所有元素

Question

我目前有几行。如果我将光标移到某行上，我就会有这个类:这应该会影响所有具有“line”类的行。我的问题是，当光标位于“line”类的某个元素上方时，我希望不要激活所有元素的悬停。我怎样才能将光标悬停在此类的任何行上并激活悬停效果？

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.line:hover {
 stroke-width: 5px;
}

http://plnkr.co/edit/f5wkxj29tieHF4mQWRiV?p=preview

function display(data){ 
//animate the new points
  var path=g.selectAll(null)
  .data(data)
    .enter()
    .append("path")

//****** class line *** 

    .attr("class", "line")
    .attr("d", function(d,i) { return (lineGenerator(data)); })
    .style("stroke", function(d) { return "brown" });


path.each(function(d){
  var totalLength = this.getTotalLength();
    d3.select(this)
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
  .attr("stroke-dashoffset", 0);
})   

}

Answer 1

从你提出问题的方式很难知道你在问什么。如果您尝试在鼠标悬停时显示所有线条的悬停外观，则可以定义指向 SVG 中路径元素集的 mouseover 和 mouseout 函数。

这是一种方法:

  path.on("mouseover", function(d){
    d3.selectAll("path")
      .transition()
      .style("stroke-width", "5px");
  })
  .on("mouseout", function(d){
    d3.selectAll("path")
      .transition()
      .style("stroke-width", "1.5px");
  });

在这里查看:http://plnkr.co/edit/IOLu2xOn7TE7ObFi7tqm?p=preview

如果您想问其他问题，您可能需要编辑您的问题。