CODEWITHSUNDEEP
d3.js
turtle
turtle

Reputation: 8103

Create a line connecting circles upon mouse hover

I have a scatter plot made in D3 with circles denoting each data point. Here's my code:

viz.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr("cx", function(d) {return x(d.x)})
  .attr("cy", function(d) {return y(d.y)})
  .attr("r", 5)
  .attr("fill", function(d) {return d.color})
  .on('mouseover', function(d){
      console.log(d.color)
  })

What I would like to do is, when a given circle is hovered on, connect all circles through a line that have the same color. How can I do this? I can get the color logged into the console, but I don't understand how I can connect all points with the same color through a line upon mouse click?

Upvotes: 1

Views: 1519

Answers (2)

meetamit
meetamit

Reputation: 25187

You can also do it without relying on a common class attribute. In the mouseover handler: 

d3.selectAll('.dot')
  .filter(function (dOther) { return d.color == dOther.color })
  .attr('r', 3.5)

Upvotes: 1

Phuoc Do
Phuoc Do

Reputation: 1344

You can assign a class with color code to your circles. Use d3.selectAll to retrieve all of them on mouseover. Then retrieve their coordinates and pass the coordinates to draw d3.svg.line.

svg.selectAll(".dot")
    .data(data)
  .enter().append("circle")
    .attr("class", function(d) {
        return 'dot color-' + color(d.species).replace('#','');
      })
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.sepalWidth); })
    .attr("cy", function(d) { return y(d.sepalLength); })
    .attr("dot-color", function(d) { return color(d.species).replace('#',''); })
    .style("fill", function(d) { return color(d.species); })
    .on("mouseover", function() {
        d3.selectAll(".color-" + $(this).attr("dot-color"))
          .attr("r", 5.5);
    })
    .on("mouseout", function() {
        d3.selectAll(".color-" + $(this).attr("dot-color"))
          .attr("r", 3.5);
    });

Here's an example with color hover:

http://vida.io/documents/KinEKRkSPSfStA4Eu

Upvotes: 2

Related Questions