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

Question

我创建了两个不同的 SVG。一个包含带有数据点的图表，另一个包含三条线。线条颜色应该取决于所选的数据点，但我尚未设法完成此操作(更多详细信息如下)。 jsfiddle 可以在这里找到:jsfiddle 。

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

相关代码如下所示。我向 mySvg 添加一个包含数据点的图表，当我将鼠标悬停数据点时，我将它们的颜色更改为黑色，并将其他 SVG< 中线条的颜色更改为黑色。/code> 变为绿色。但是，我实际上不想将所有线条的颜色更改为绿色，而是将它们的颜色更改为 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 问题一样，这个问题可以使用数据绑定(bind)轻松解决。您的自定义颜色可以绑定(bind)到您附加到第二个 SVG 的行。由于您的数组 myColors 由每行的自定义颜色数组组成，因此与其他数组(如 names、x1Val、y1Val 等等，它可以轻松集成到用于将信息绑定(bind)到线条的数据数组 coords 中:

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

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

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

回调确定颜色

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

检查更新的JSFiddle一个工作示例。

<小时/>

此外，我还更新了 mouseout 处理程序，以删除之前设置的 lines 样式，从而使线条重置为类 sweepline< 设置的默认颜色。至少在我看来，这种行为似乎缺失了。

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