必要な色を含むデータに3つのシンプルな四角形をリンクする

Question

私は次のようにしています - 私が達成しようとしているのは、各四角形が3つの四角形で、単純なデータ構造の異なるメンバーに結合されたdtaです。各正方形の色をcolrのdtaにリンクするにはどうすればよいですか？

https://plnkr.co/edit/Y5plUy?p=preview

ご注意：私は、上記の関数updateBarChart()は、まだ完全には機能していないが、それがあることを認識

//############# SQUARES ################### 
function dsSquares() { 

    var dta = { 
    categ: ["N", "P", "B"], 
    colr: ["yellow", "pink", "blue"] 
    } 

    var basics = dsSquaresBasics(); 
    var margin = basics.margin, 
    width = basics.width, 
    height = basics.height; 

    //Create SVG element 
    var SQsvg = d3.select("#threeSquares") 
    .append("svg:svg") 
    //.data(dta) 
    .attr({ 
     "width": width + margin.left + margin.right, 
     "height": height + margin.top + margin.bottom, 
     id: "squaresArea" 
    }); 

    var SQg = SQsvg 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
    SQg.selectAll("rect") 
    .data(dta.categ) 
    .enter() 
    .append("rect") 
    .attr({ 
     x: margin.left, 
     y: function(d, i) { 
     return i * 65 
     }, 
     "width": width, 
     "height": 50, 
     //fill: 'green' //<<<<<WORKS OK 
     fill: dta.colr //<<<<<NOT WORKING 
    }) 
    .on("click", up); 


    function up(d, i) { 
    //update bar chart when user selects a square 
    updateBarChart(d, "green"); 
    console.log(d); 
    } 

} 

dsSquares(); 

以上が私の最初のD3はここに保存され、視覚的未遂の一部であり、ジグソーパズルの次のブロックには、私はそれを助ける必要はありません...まだ！

Answer 1

dta.colrのデータは長方形にバインドされていません。より良いアプローチは、オブジェクトの配列内でcategと共に色を定義することです。

あなたのデータ構造を変更することができない場合は、あなたが彼らの指標に基づいて長方形を色付けすることができますが：これで助けを

fill: function(d,i){ return dat.colr[i];}