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);