在鼠标悬停时创建连接圆的线

问题描述：

我在D3中制作了散点图，圆圈表示每个数据点。这里是我的代码：在鼠标悬停时创建连接圆的线

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

我想要做的是，当给定圆上徘徊，通过具有相同颜色的线连接各界。我怎样才能做到这一点？我可以将颜色记录到控制台中，但我不明白如何通过鼠标单击时通过一条线将所有点连接到相同的颜色？

答

您可以将颜色代码分配给您的圈子。使用d3.selectAll在鼠标悬停上检索它们。然后检索它们的坐标并传递坐标以绘制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); 
    });

这里的色彩悬停一个例子：

http://vida.io/documents/KinEKRkSPSfStA4Eu

答

您也可以不依赖于一个共同的类属性做到这一点。在鼠标悬停处理程序中：

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

在鼠标悬停时创建连接圆的线

相关推荐