如何在D3.JS中设置随着参数变化的颜色？

最新推荐文章于 2023-02-25 16:43:19 发布

anxingirl

最新推荐文章于 2023-02-25 16:43:19 发布

阅读量1.3k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/anxingirl/article/details/123018162

版权

11参考资料：javascript - How to make a color scale in D3 JS to use in fill attribute? - Stack Overflow

#设置一个参数
var data = d3.range(50);

#设置颜色到参数的对应关系
var colors = d3.scaleQuantize()
    .domain([0,50])
    .range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", 
    "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
		
var svg = d3.select("svg");

var rects = svg.selectAll(".rects")
	.data(data)
	.enter()
	.append("rect")
	.attr("y", 10)
	.attr("height", 100)
	.attr("x", (d,i)=>10 + i*9)
	.attr("width", 6)
	.attr("fill", d=>colors(d))
	.attr("stroke", "gray");