D3 圆形鼠标悬停

Question

尝试使用鼠标悬停作为工具提示的一部分来突出显示特定圆圈。当我将鼠标悬停在任何圆圈上时，我可以让它突出显示所有圆圈，但无法弄清楚如何仅突出显示鼠标悬停所在的圆圈。 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);

Answer 1

你可以使用select(this)，例如：

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

D3 圆形鼠标悬停

D3 circle mouseover

d3.js

tooltip

mouseover