悬停不适用于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中的路径元素集。

这是一种方法：

  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

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

Answer 2

首先，我会修改你的css，以便类的存在也会触发所需的外观。

.line:hover, .line.hovered {
    stroke-width: 5px;
}

然后我将介绍javascript来添加或删除该类，在mouseover和mouseout事件中触发。

var updateLineHover = function() {
    if ($('.line:hover').length) {
        $('.line').addClass('hovered');
    } else {
        $('.line').removeClass('hovered');
    }
};

$('.line').on('mouseover', updateLineHover);
$('.line').on('mouseout', updateLineHover);