D3 - 如何迭代颜色数组

Question

我是一个非常初学的程序员（非常重视）。我想弄清楚如何遍历颜色数组，以便制作三个不同颜色的矩形。这是我到目前为止的代码：

var dataArray = [5, 11, 18]; 
var colors = ["red", "green", "black"]; 

var svg = d3.select("body").append("svg") 
    .attr("width","2000").attr("height","400"); 

svg.selectAll("rect") 
     .data(dataArray) 
     .enter() 
     .append("rect") 
     .attr("fill", function(d, i) { return colors*i}) //the line of code in question 
     .attr("x", function(d,i) { return 70*i + 50; }) 
     .attr("y", function(d,i) { return d*15; }) 
     .attr("height", function(d,i) { return 500; }) 
     .attr("width", "50"); 
//code end 

正如你所看到的，我一直在尝试使用function(d, i)通过阵列的颜色迭代，未果。完全公开：上面的代码是为一个类创建的，但这个特定的问题不属于任务的一部分。我试图超出任务范围。

Answer 1

您是否尝试过使用colors[i]而不是colors*i？ 这将允许您访问我的地方值。 （颜色[1]将'绿'，颜色[0]将'红'等）

Answer 2

另一个答案是正确的，颜色[我]会给你你的颜色，所以它值得复选标记。在这个问题的答案的修复程序会给你：

var dataArray = [5, 11, 18]; 
 
var colors = ["red", "green", "black"]; 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width","2000").attr("height","400"); 
 

 
svg.selectAll("rect") 
 
     .data(dataArray) 
 
     .enter() 
 
     .append("rect") 
 
     .attr("fill", function(d, i) { return colors[i]}) 
 
     .attr("x", function(d,i) { return 70*i + 50; }) 
 
     .attr("y", function(d,i) { return d*15; }) 
 
     .attr("height", function(d,i) { return 500; }) 
 
     .attr("width", "50"); 
 
//code end

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

但是，看着结果，第一条是最高的，但具有最小的数据值。所有小节都有500个像素高，每个都有一个低于SVG边缘的部分。

我想我只是指出在代码中的几个潜在的改进：

抓住无论是当前的数据阵列中或元素（d）当前增量的时候使用function(d,i)只需要（i ），所以：

.attr("height", function(d,i) { return 500; })你可以使用：.attr('height',500);

不过，我怀疑你想要的所有项目为500个像素高（尤其是你的SVG只有400像素高）。如果您有利润空间，这一点尤其明显。

因此，对于高度，我们就可以用你目前正在使用您的Y式坐标：

.attr("height", function(d,i) { return d*15; })

现在，我们必须有酒吧在同一点结束通过操纵的位置每个矩形的顶部： （从SVG（这是在400）的底部上浮d * 15个像素，在SVG坐标空间0是在顶部）：

.attr("y", function(d,i) { return 400 - d*15; })

它给你：

var dataArray = [5, 11, 18]; 
 
var colors = ["red", "green", "black"]; 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width","2000").attr("height","400"); 
 

 
svg.selectAll("rect") 
 
     .data(dataArray) 
 
     .enter() 
 
     .append("rect") 
 
     .attr("fill", function(d, i) { return colors[i]}) 
 
     .attr("x", function(d,i) { return 70*i + 50; }) 
 
     .attr("y", function(d,i) { return 400-d*15; }) 
 
     .attr("height", function(d,i) { return d*15; }) 
 
     .attr("width", "50");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

最后， 引号引起来的字符串，但如果您使用的是数字，那么你可以删除它们：

此：.attr("width", "50");可以.attr("width",50);