我已经设法将渐变应用到我的条形图上,渐变效果给出了所需的结果。
var gradient = svg.append("defs")
.data(data)
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "00%")
.attr("spreadMethod", "pad");
gradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", function(d) {
return colors(d.name);
})
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", function(d) {
return colors(d.name);
})
.attr("stop-opacity", 0.3);
我还有一个色标,用于为每个类别(名称)分配颜色
var colors = d3.scale.ordinal()
.range(["#C1D42F", "#2b328c", "#5AB88D", "#8F1F61", "#00A5D3", "#EC5D20", "#F59C28"])
在我开始使用渐变之前,这个方法运行得很好
但是,现在看来,我使用的函数只是从我的范围中获取第一种颜色(#C1D42F)。
我如何应用渐变以及指定范围颜色?
这是我的fiddle
1条答案
按热度按时间0md85ypi1#
有两个问题与此结果相关
1)渐变定义缺少.enter()方法
这对于为每个数据点创建linearGradient元素是必需的。
您可以用途:
现在,您的每种颜色都有一个linearGradient元素,而不是只有一个。但是,您会注意到问题仍然存在,这导致了第二个问题:
2)如果所有线性渐变都具有相同的ID,则代码无法区分颜色。
不同的linearGradient元素需要不同的ID才能引用它们所表示的数据。继续上一个示例,而不是:
您可以用途:
在条形图中,代码现在可以根据数据引用正确的linearGradient: