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

我创建了两个不同的

svg

。一个包含带有数据点的图形，另一个包含三条线。线的颜色应该取决于所选的数据点，我还没有做到这一点（更多细节如下）。可以在以下位置找到JSFIDLE:

我想做的是，当我将鼠标移到数据点上方时，更改三行的颜色。我设法将所有行的颜色更改为相同的颜色，但实际上我想使用与相应数据点关联的颜色，但我不知道如何将存储在

myColors

中的颜色数据传递到设置行颜色的函数

相关代码如下所示。我将带有数据点的图形添加到

mySvg

中，当我将鼠标移到数据点上方时，我将它们的颜色更改为黑色，将另一个

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');

                        }); 

---

与许多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

th对象。

i

是这个圆的索引，它作为参数传递给事件处理程序，并通过闭包提供给

stroke

回调

正在从此对象获取属性

.color

检查更新后的示例以了解工作示例

---

此外，我还更新了

mouseout

处理程序，以删除以前设置的

stroke

样式，从而使线条重置为类

sweedline

设置的默认颜色。至少在我看来，这种行为似乎不存在

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

---

我收到你的留言；-）这次我不确定，我是否理解你的问题。也许，这是因为我无法理解您试图用代码实现什么。我仍然错过了大局。无论如何，我已经用我认为是解决你问题的方法更新了你的答案。如果这解决了你的问题，我将在回答中进一步解释。@altocumulus:你是一个救生员！：）这正是我一直在寻找的，但我无法解决！是的，请把它作为一个附加评论的答案发布，我将接受（并投票）它。临界线似乎是“returnd[5][i].color；”请详细说明。给出“大局图”是很困难的，但这是我能想到的最好的最低限度的例子，我不得不承认，这个例子似乎确实不太合理。所以非常感谢你的努力！我只能在明天对你的答案发表评论，所以如果我不尽快回复，请不要感到惊讶。非常非常有帮助，再次感谢！似乎我必须在数据结构上投入更多的时间。对于我的实际问题，我必须从CSV或JSON文件中读取这些数据。接下来的挑战是从这些文件中获取数据结构“coords”，但我想有一些聪明的方法可以做到这一点。再次感谢，下一个问题再见！；）