当我使用 D3 将鼠标悬停在第二个 SVG 的元素上时，如何同时更新 SVG 中元素的颜色

Question

我创建了两个不同的SVGs。一个包含带有数据点的图形，另一个包含三条线。线条颜色应该取决于所选数据点，我还没有设法完成这项工作（下面有更多详细信息）。 jsfiddle 可以在这里找到：jsfiddle。

当我mouseover数据点时，我想做的是改变三行的颜色。我设法将所有线条的颜色更改为相同的颜色，但实际上想使用与相应数据点关联的颜色，但我不知道如何将存储在myColors 中的颜色数据传递给我设置线条颜色的功能。

相关代码如下所示。我将带有数据点的图形添加到mySvg，当我mouseover 数据点时，我将它们的颜色更改为黑色，将另一个SVG 中的线条颜色更改为绿色。但是，我实际上不想将所有线条的颜色更改为绿色，而是将它们的颜色更改为myColors 中定义的颜色（请参阅上面链接的 jsfiddle 以查找数据）。我怎么能这样做？

var circles = mySvg.selectAll("circle")
                         .data(lineData)
                         .enter()
                         .append("circle");

var circleAttributes = circles
                       .attr("cx", function (d) { return xScale(d.x); })
                       .attr("cy", function (d) { return yScale(d.y); })
                       .attr("r", 6)
                       .style("fill", 'red')
                       .on('mouseover', function(d){
                           d3.select(this).style("fill", 'black');
                           d3.select('#myLines').selectAll("line").attr("class","sweepline").style("stroke", 'green');

                           })

                       .on('mouseout', function(d){
                           d3.select(this).style("fill", 'red');

                        }); 

Answer 1

与许多 d3 问题一样，使用数据绑定可以轻松解决这一问题。您的自定义颜色可以绑定到您附加到第二个 SVG 的行。由于您的数组myColors，由每行自定义颜色的数组组成，与您的其他数组（如names、x1Val、y1Val 等）具有相同的结构，因此它可以轻松集成到数据数组中coords 用于将信息绑定到您的线路：

var coords = d3.zip(names, x1Val, y1Val, x2Val, y2Val, myColors);

每行的这些数据稍后可以在您的圈子的mouseover 事件处理程序中使用，在行上设置stroke 样式。

.on('mouseover', function(d,i) {
    // ...
    d3.select('#myLines')
        .selectAll("line")
            .style("stroke", function(d) {
                return d[5][i].color;
            });
})

回调决定颜色

1. 访问自定义颜色数组，该数组位于绑定到行的数据数组的第 5 位，因此d[5]，
2. 获取此颜色数组的ith 对象。 i 是这个圆圈的索引，它作为参数传递给事件处理程序，并通过闭包提供给 stroke 回调，
3. 从此对象获取属性.color

查看更新后的JSFiddle 以获取工作示例。

---

此外，我更新了mouseout 处理程序以删除先前设置的stroke 样式，导致线条被重置为由sweepline 类设置的默认颜色。至少在我看来，这种行为似乎消失了。

d3.select('#myLines')
    .selectAll("line")
        .style("stroke", null);