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

Question

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

我之前已经绘制了单独的条形图，但不确定如何绘制多个小条形图并将其放置在图片中。

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

Answer 1

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

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}, ...]},
]

然后，您需要将图表实现为reusable charts，这样您就可以生成任意数量的图表而无需复制代码并遵循D3样式。假设您有一个可重复使用的图表barchart，您需要对其进行配置，为图表创建容器元素并调用图表：

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

此致