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 + ")"});

我把小提琴附在这里

这就是我要复制的内容：

每个页面上会有几个这样的图表，因此，我希望每个图表有一个div。

Answer 1

有两件事需要进行重大更改：

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

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

工作的小提琴在这里