Accepted answer

It's sort of hard to know what you're asking from the way you phrased your question. If you're trying to display hovered appearance for all of the lines when one is moused over, you can define mouseover and mouseout functions that point to the set of path elements in the SVG.

Here is one way to do that:

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

Check it out here:

If you're asking something else you may want to edit your question.


First, I would modify your css so that the presence of a class will trigger the desired appearance as well.

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

Then I would introduce javascript to add or remove that class, triggered on mouseover and mouseout events.

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

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

Related Query

More Query from same tag