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

Question

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

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

相关代码如下所示。我将带有数据点的图表添加到 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;
            });
})

回调决定颜色

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

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

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

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

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

How to simultaneously update the color of elements in a SVG when I mouseover elements of a second SVG using D3

javascript

d3.js

mouseover