D3 кружок при наведении курсора

Попытка выделить конкретный круг с помощью наведения мыши как части всплывающей подсказки. Я могу заставить его выделять все круги, когда я навожу курсор мыши на любой из них, но не могу понять, как выделить только тот, где находится курсор. Circles.transition() выбирает их все, есть ли что-то, что я могу просто заменить здесь?

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

d3.js tooltip mouseover
person user3518221    schedule 04.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

вы можете использовать select(this), например:

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