D3.js D3js最小可重用模块不循环？

我正在学习创建D3js可重用模块，跟随Mike、Christophe Viau（10到20分钟）和我在Stackoverflow上找到的。我的简化可重用模块预计将生成4 x 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}]}
];

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

如何使其循环？

每次调用（图表）时，函数都会重新选择以前绘制到svg中的条形图，而不会创建任何新条形图。另外，巧合的是，作为后续更新的一部分（在

//design svg elements

下），预先存在的条形图不会被重新绘制，因为您将

条形图

指定给了

enter（）

的结果，而不仅仅是

data（）

绑定的结果

您可能希望为每对条创建一个容器。对于编写的循环，可以使用d3绑定而不是

。大概是这样的：

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

与

后者对分配给一对条形图的每个
g
进行操作。前者在整个svg上运行。可重用组件似乎不适合访问您创建的
svg
。将d3选择传递给模块函数的主要原因是指定容器。这样，组件只需布置其子组件，而使用组件的“父”代码则负责定位父容器

这是我的建议

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

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