如何使用嵌套數組繪製網格？

Question

我對d3很新。我也這樣與它的工作原理：

<script type="text/javascript"> 

    var w = 620; 
    var h = 30; 

    var father = [ true, true, false, false, false ]; 

    //Create SVG element 
    var svg = d3.select("#parentsmed") 
     .append("svg") 
     .attr("height", h) 
     .attr("width", w); 

    var fatherrects = svg.selectAll("rect") 
     .data(father) 
     .enter() 
     .append("rect"); 

    fatherrects.attr("x", function(d, i) { 
     return (i * 31) + 93; 
     }) 
     .attr("width", 30) 
     .attr("height",30) 
     .attr("fill", function(d, i) { 
     if(father[i] == true) { 
      return "#89CFF0"; 
     } else { 
      return "#efefef"; 
     } 
     }); 

</script> 

我希望做的是要麼另一個數組VAR或一個嵌套的數組並借鑑了「母親」值......事情是這樣的：

<script type="text/javascript"> 

    var w = 620; 
    var h = 30; 

    var father = [ true, true, false, false, false ]; 
    var mother = [ false, true, false, false, true ]; 

    //Create SVG element 
    var svg = d3.select("#parentsmed") 
     .append("svg") 
     .attr("height", h) 
     .attr("width", w); 

    var fatherrects = svg.selectAll("rect") 
     .data(father) 
     .enter() 
     .append("rect"); 

    fatherrects.attr("x", function(d, i) { 
     return (i * 31) + 93; 
     }) 
     .attr("width", 30) 
     .attr("height",30) 
     .attr("fill", function(d, i) { 
     if(father[i] == true) { 
      return "#89CFF0"; 
     } else { 
      return "#efefef"; 
     } 
     }); 


    var motherrects = svg.selectAll("rect") 
     .data(mother) 
     .enter() 
     .append("rect"); 

    motherrects.attr("x", function(d, i) { 
     return (i * 31) + 93; 
     }) 
     .attr("y", 31) 
     .attr("width", 30) 
     .attr("height",30) 
     .attr("fill", function(d, i) { 
     if(mother[i] == true) { 
      return "#89CFF0"; 
     } else { 
      return "#efefef"; 
     } 
     }); 
</script> 

這畫出fatherrects，但不是motherrects。如何使用兩個數組變量（如圖所示）或單個嵌套數組來繪製它們（頂部行的父級矩形，最底部的母級矩形）？

Answer 1

您在父親和母親的案例中都選擇了相同的<rect>元素。由於你沒有在數據綁定中提供關鍵函數，所以鍵默認爲數組索引，這對母親和父親數組都是一樣的。相同的節點加上相同的綁定鍵意味着您正在用母數據更新父節點（並且enter()選擇將爲空）。

如果您向父節點添加「父親」類，爲母親節點添加「母親」類，您可以在選擇時將它們分開。例如：

var motherrects = svg.selectAll("rect.mother") 
    .data(mother) 
    .enter() 
    .append("rect") 
     .attr("class", "mother"); 

另一種選擇是一個關鍵的功能傳遞到data電話，但是這會涉及到修改數據，以便它包含的東西可以作爲一個按鍵使用。通過對節點進行分類來保持節點更加簡單並且可能更加正確。

另一個選擇是使用你的建議的二維數組（[father, mother]），然後一羣來自各子陣列rects在自己<g>：

var g = svg.selectAll("g") 
    .data(data) 
    .enter() 
    .append("g"); 

g.selectAll("rect") 
    .data(function(d) { return d; }) 
    .enter() 
    .append("rect"); 

這使得使用選擇的分組結構。 data函數中的d的值將是第一次調用中的父數組，然後是第二次中的母數組，並且將在相應的<g>元素下創建矩陣。