CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

hovering does not work with all elements of the same class in d3.js

I currently have several lines. and if I pass the cursor over some line I have this class: that should affect all the lines with the class "line". my problem is that I want when the cursor is above some element with the class "line" do not activate the hovering in all. how can I make to hover the cursor over any line with this class and activate the hovering effect?

.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);
})

}

enter image description here

Upvotes: 0

Views: 128

Answers (2)

arbuthnott
arbuthnott

Reputation: 3819

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) {
        $('.line').addClass('hovered');
    } else {
        $('.line').removeClass('hovered');
    }
};

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

Upvotes: 0

Sledge
Sledge

Reputation: 1345

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){
    d3.selectAll("path")
      .transition()
      .style("stroke-width", "5px");
  })
  .on("mouseout", function(d){
    d3.selectAll("path")
      .transition()
      .style("stroke-width", "1.5px");
  });

Check it out here: http://plnkr.co/edit/IOLu2xOn7TE7ObFi7tqm?p=preview

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

Upvotes: 1

Related Questions