Question

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

我想要做的是在mouseover数据点时更改三条线的颜色。我设法将所有线条的颜色更改为相同的颜色，但实际上想要使用与相应数据点相关联的颜色，但我不知道如何传递存储在{{{ 1}}到我设置行的功能＆＃39;颜色。

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

myColors

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样式，从而将行重置为类sweepline设置的默认颜色。至少在我看来，这种行为似乎不见了。

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

当我使用D3

1 个答案: