配列内の数字に対応する行の四角形の数を塗りつぶす方法。 d3.js

Question

私は100個の長方形を10x10の正方形に並べました。私はそれが二回表示されているプラ​​スのコードは本当に醜いので、私は値4で立ち往生しています次の配列

var avg = [1, 4, 4, 7, 11, 15, 58] 

で番号に従って色に矩形の数をしたいです。 if/elseを使用せずにこれを達成するより良い方法はありますか？

出力は、色[0]の色と、色1の4つの四角形と、色[2]などの次の4つの四角形である必要があります。ここ JS fiddle 私のコードです：

var avg = [1, 4, 4, 7, 11, 15, 58] 
var colors = ['#009BFF', '#AAC30A', '#DC0f6e', '#82b905', '#96be00', '#C8D205', 
    '#82141E', '#BE232D', '#E14614', '#EB6E14', '#EB8614', '#F0AA00' 
] 

var ContainerWidth = document.querySelector('#mainContainer').offsetWidth; 
var rectWidth = ContainerWidth/20 
var svgContainer = d3.select("#boxy") 

var rectangle = svgContainer.selectAll("rect") 
    .data(d3.range(100)); 

var rectangle = rectangle.enter() 
    .append("rect") 
    .style("stroke", "#fff") 
    .style("fill", function(d, i){ 
    for(var k=0; k<avg.length; k++){ 
    if(i<=avg[0]-1){ 
      return colors[0] 
      } else if(i<=avg[1] && i>=avg[0]-1){ 
      return colors[1] 
      } else if(i<=avg[2]-1 && i>=avg[1]-1 || avg[2]-1===avg[1]-1){ 
      return colors[2] 
      } else if(i<=avg[3]-1 && i>=avg[2]-1){ 
      return colors[3] 

      } 
    } 
    }) 
    .attr("x", function(d, i) { 
    return i % 10 * 45 
    }) 
    .attr("y", function(d, i) { 
    return Math.floor(i/10) % 10 * 45 
    }) 
    .attr("width", rectWidth) 
    .attr("height", rectWidth); 

Answer 1

あなたが取ることができるいくつかの方法があります。主な課題は、データ配列に100個の矩形に一致する要素が100個含まれていないことです。あなたはsvg要素にそのデータをバインドすることはできません。

100アイテムのデータ配列を作成し、それを使って矩形を作成することができます（d3.range(100)ではなく）。または、カスタム関数を使用して長方形を追加して色を決定することもできます。

最初のアプローチのために

---

、あなたは100の項目の長さであるデータ変数を作ることができる（または、すべてのavg配列要素の合計があるものは何でも）：

var avg = [1, 4, 4, 7, 11, 15, 58]; 
var data = []; 
var category = 0; 

for (i = 0; i < avg.length; i++) { 
    for (j=0; j < avg[i]; j++) { 
    data.push(category); 
    } 
    category++; 
} 

データ：[ 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 90 more… ]

そして、このデータ配列をデータソースとして使用して長方形を追加すると、比較的簡単に色を割り当てることができます。

var rectangle = svgContainer.selectAll("rect") 
    .data(data) 
    .enter() 
    .append("rect") 
    .style("fill", function(d) { return colors[d]; }) 

フィドル：https://jsfiddle.net/e44y72v8/

---

それとも、あなたは100枚の長方形を追加するd3.range(100)を保つが、適用されるべきである何色かを決定するための関数を使用することができます。これには、100個の四角形を進めながら、配列の要素の累積を追跡する必要があります。

var currentIndex = 0; // What element of the array are we at 
var cumulative = 0; // What is the cumulative total of all array elements between 0 and current index. 

そして、あなたの関数は次のようになります。：

.style("fill", function(d, i){ 
    if (i == cumulative) { 
     cumulative += avg[currentIndex+1]; 
     return colors[currentIndex++]; 
     } 
    else { 
      return colors[currentIndex];  
    } 

    }) 

をフィドル：これは、2つの新しい変数が必要ですhttps://jsfiddle.net/sttL9vaz/