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

我有 2 个数组：

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>

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