Наведение круга D3 - PullRequest
Новая
       27

Наведение круга D3

0 голосов
/ 04 июля 2018

Попытка выделить определенный круг, используя указатель мыши как часть всплывающей подсказки. Я могу заставить его выделить все круги, когда наведу курсор мыши на любой из них, но не могу понять, как выделить только тот, где находится наведение мыши. circle.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);

1 Ответ

0 голосов
/ 04 июля 2018

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

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