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

致以敬意，