2个数组一个值一个颜色使D3条形图具有相同索引值的颜色

2 arrays one of values one of colors make D3 bar chart have color at same index of value

本文关键字：一个 颜色 索引值 D3 数组 2个 条形图      更新时间：2023-09-26

我有两个数组:

values = [1,2,3,4,5,4,7,2,9,10];
colors = ['red','red','blue','blue','green','green','orange','orange','pink','pink'];

我试图建立一个D3条形图，其中每个条形图的高度是值的10倍，并对应于具有与值相同索引的颜色。

这是我目前为止写的:

d3.select("body").selectAll("div")
            .data(total_data)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("fill", function(d) {
                return colors[values.indexOf(d)];
            })

但是，假设我们有一个重复的值，那么它将返回错误的颜色。我还试图从2个数组创建一个JSON，然后将其作为数据传递，但我遇到了麻烦。做上述事情的最好方法是什么?谢谢!

既然你只希望每个栏有一个颜色…

对应与值

具有相同索引的颜色

您只需要使用每个栏的索引访问数组colors:

.attr("fill", function(d,i){ return colors[i]});

下面是一个工作示例(为简单起见，使用宽度为值的10倍，而不是高度):

values = [1,2,3,4,5,4,7,2,9,10];
colors = ['red','red','blue','blue','green','green','orange','orange','pink','pink'];
var width = 400, height = 400;
var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	
var bars = svg.selectAll(".myBars")
	.data(values)
	.enter()
	.append("rect");
	
bars.attr("x", 10)
	.attr("y", function(d,i){ return 10 + i*40})
	.attr("width", function(d){ return d*10})
	.attr("height", 30)
	.attr("fill", function(d,i){ return colors[i]});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

提示:当你有一个大数据集，或者当你的数据集不断变化时，这不是一个好方法。相反，使用一个对象数组，您可以在其中为每个对象设置颜色，或者创建一个为条形条着色的规则。

相关文章：