Question

嘿我试图根据一些数据在折线图中为多个部分设置不同的线性渐变。为此，我在init函数中创建了多个标签：

var defs = self.svg.append("defs");

self.gradient = defs.data(self.data)
    .enter()
    .append('lineargradient')
    .attr("id", function (d, i) {
        return 'svgGradient_' + i;
     })
    .attr("x1", "0%")
    .attr("x2", "0%")
    .attr("y1", "100%")
    .attr("y2", "0%");

self.gradient.append("stop")
    .attr('class', 'start')
    .attr("offset", "0%")
    .attr("stop-color", "yellow")
    .attr("stop-opacity", 1);

self.gradient.append("stop")
    .attr('class', 'end')
    .attr("offset", "100%")
    .attr("stop-color", 'red')
    .attr("stop-opacity", 1);

在我的更新功能中，我根据数据值更改了停止颜色：

d3.selectAll('linearGradient>stop.end')
    .data(self.data)
    .attr('stop-color', function (d) {
        return self.colorScale(d.current);
    });

该代码确实成功创建了多个线性渐变并更新了正确值的颜色。通过创建线部分，我将笔划设置为特定线性渐变的URL，如下所示：

.attr('stroke', function (d, i) {
        return 'url(#svgGradient_' + i + ')';
    })

查看结果，似乎每个行部分都有正确的URL。但这里存在的问题是，线性渐变标记不是defs的子标记，而是标记的html标记的子代。线条部分也没有任何笔触颜色，即使它们链接到正确的线性渐变标记。问题可能是标签不在defs标签下吗？

任何帮助都会非常感激。

无法使用D3.js

0 个答案: