D3js最小可重複使用模塊不循環？

Question

我正在學習創建D3js可重用模塊，其中包括Mike的Towards Reusable Charts article，Christophe Viau的The D3 Reusable API Speech（分鐘10到20）和a fiddle，我在Stackoverflow上找到了它。我簡化了可重複使用的模塊，預計生產4×2米的長方形，但目前只生產了2先失敗，則循環正常在我的其他數據：

//Data 
var data = [ 
    {row: 0, col: 0, value: [{x: 1, y: 19}, {x: 2, y: 20}]}, // <= This only is produced! 
    {row: 0, col: 1, value: [{x: 1, y: 24}, {x: 2, y: 27}]}, // <= from there it fails 
    {row: 1, col: 1, value: [{x: 1, y: 31}, {x: 2, y: 26}]}, 
    {row: 1, col: 2, value: [{x: 1, y: 29}, {x: 2, y: 19}]} 
]; 

JS這應該循環在我的數據：

function exports(_selection) { // create function to export 
    _selection.each(function(_data) { // loop 
     var test_data = _data.value; 
     var rectW = (_data.row+2)*10, 
      rectH = (_data.col+1)*10; 

     // Select all bars and bind data: 
     var bars = svg.selectAll(".bar") 
        .data(test_data) 
       .enter().append("rect"); 

     console.log(i+": "+JSON.stringify(_data.value)); 

    // design svg elements 
    bars.attr("class","bar") 
     .attr({ 
      'width': rectH, 
      'x': function (d){ console.log(" log place1! "); return d.x * 10;}, 
      'y': function (d){ return d.y * 4;}, 
      'height': rectH*4}); 
     console.log(" log place2! "); 

    }); 
}// exports end 

如何讓它循環？fiddle。

Answer 1

每次你call(chart)函數結束重新選擇你以前繪製到SVG，而不是創建任何新的酒吧。而且，巧合的是，現有的預條沒有得到重新繪製的後續更新（// design svg elements下）的一部分，因爲您分配bars到enter()的，而不是給data()結合的只是結果的結果。

您可能想要爲每對酒吧創建一個容器。您可以使用d3綁定代替您編寫的for循環。事情是這樣的：

// Module and custom settings 
var chart = d3.coolmodules.barChart() 
    .width(800).height(800); 
// Runs 
svg.selectAll("g").data(data) 
    .enter() 
    .append('g') 
    .attr('transform', function(d, i) { 
     return 'translate(' + (i*50) + ',0)';// Space the <g>'s horizontally 
    }) 
    .call(chart); 

而另一個重要的變化是

var bars = d3.select(this).selectAll(".bar") 

後者分配給一對杆每g工作，以取代

var bars = svg.selectAll(".bar") 

。前者是在整個svg上運行。可重用組件訪問您創建的svg似乎不合適。將d3選擇傳遞給模塊函數的主要原因是指定容器。這樣一來，該組件只是奠定了其子，而使用該組件的「父」代碼取父容器定位的責任交易。

這裏的updated fiddle。