Graph d3js：按特定顺序排列的多个条形图

我想画多个条形图，并使用d3js将它们排列在特定的位置。基本上是这样的：

我在前面画了单独的条形图，但不知道如何画多个小条形图，并将它们放置在图中所示的位置

---

任何建议或链接都会有帮助

要创建如图所示的多个图表，您需要有一个数据结构，允许您计算图表的布局。数据结构可能类似于：

var data = [
    {row: 0, col: 0, data: [{x: 1, y: 1}, {x: 2, y: 2}, ...]},
    {row: 0, col: 1, data: [{x: 1, y: 2}, {x: 2, y: 3}, ...]},
]

然后，您需要将图表实现为，这样您就可以生成任意数量的图表，而无需重复代码并遵循D3样式。假设您有一个可重用的图表

条形图
，则需要对其进行配置，为图表创建容器元素，并调用图表：

// Create and configure the barchars
var chart = barchart()
    .width(100)
    .height(100);

// Create the SVG element and set its size...

// Create a group for each element in the data array
var gcharts = svg.selectAll('g.chart').data(data)
   .enter().append('g')
   .attr('class', 'chart');


// Translate the groups using the row and column
gcharts.attr('transform', function(d) {
    return 'translate(' + 100 * d.row + ',' + d.col + ')';
});

// Create the charts, using the data bound to each selection.
gcharts.call(barchart);

问候，
谢谢！我现在知道了一些方法：）我看了一下，但我真的很困惑，这些示例为它们的图表调用函数提供了预定义的svg容器；但是对于我的数据，svg元素取决于行和列的值，这是如何工作的？？这是我第一次处理可重用图表：（您可以为每个图表创建一个SVG元素，或者为每个图表创建一个SVG元素。在任何情况下，您都需要了解可重用的图表模式来做类似的事情。考虑一下这两天的工作，您可以询问是否有一些您不理解的特定的内容。我将介绍一些可重用图表的示例。我想为整个图表和每个条形图添加一个SVG元素。在上面的示例代码中，您能否解释使用gcharts进行分组是如何工作的？SVG组是其他元素的容器。在示例中，为每个图表添加和转换一个组。使用ab显示的代码此外，图表的内部元素将添加到每个组中。Mike Bostock的文章可以帮助您更好地理解代码。