d3js：svg容器中的多个图表

Question

我正在尝试使用可重复使用的图表在一个svg容器中绘制多个小条形图。我为每行数组调用可重用的图表。可重复使用的图表绘制图表并将其转换为svg容器中的指定位置。问题是每次调用可重用图表时svg容器都会自行写入，因此只显示数组元素的最后一个实例。我认为这个svg选择位存在一些问题，但无法修复它。

// If no SVG exists, create one - and add key groups:
        if (!svg) {
            svg = d3.select(this)
                 .append("svg")
                 .classed("chart", true);
            var container = svg.append("g").classed("container-group", true);
            container.append("g").classed("chart-group", true);
        }

    // Transition the width and height of the main SVG and the key 'g' group: 
        svg.transition().attr({width: width, height: height});
        svg.select(".container-group")
            .attr({transform: "translate(" + 100*_data.row + "," + 100*_data.col + ")"});

我附上了小提琴here

这就是我想要复制的内容：

每个页面都有几个这样的图表，因此，我想为每个图表分配一个div。

非常感谢任何帮助！

Answer 1

有两件事需要重大改变：

1）为函数调用的每个实例创建一个新的g元素。

2）当绘制图表的条形图时，bar应该选择创建的所有图表组，而不是每次都选择相同的图表。

工作小提琴是here