CODEWITHSUNDEEP
d3.jstooltipmouseover
user3518221
user3518221

Reputation: 97

D3 circle mouseover

Trying to highlight a specific circle using mouseover as part of a tooltip. I can get it to highlight all the circles when I mouseover any of them but can't figure out how to highlight just the one where the mouseover is. circles.transition() selects them all, is there something I can simply replace here?

if(!circles){
            cellGroup = g.append("g")
                .attr("class", "cells")
                .selectAll("g")
                    .data(d3.voronoi()
                    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
                    .x(function(d) { return d.x; })
                    .y(function(d) { return d.y; })
                .polygons(MyData))

cell = cellGroup.enter().append("g").attr("class", "cell");    
circles = cell.append("circle")
                    .attr("r", 0)
                    .attr("cx", function(d) { return d.data.x; })
                    .attr("cy", 0)
                    .attr("class", "swarm-circle")
                    .style("fill", "#D4D4D4"  )
                    .on("mouseover", function(d) {
                        circles.transition()    // trying to highlight the circle that the tooltip relates to
                            .delay(0)
                            .duration(500)
                            .style("stroke", "pink")
                            .style("stroke-width", 5);

Upvotes: 0

Views: 1064

Answers (1)

Tom Shanley
Tom Shanley

Reputation: 1787

you can use select(this), for example:

.on("mouseover", function(d) {
 d3.select(this)
 .transition()
 .delay(0)
 .duration(500)
 .style("stroke", "pink")
 .style("stroke-width", 5);
})

Upvotes: 2

Related Questions