如何在单个html页面上实现D3.js v4多个单独的图表

Question

我正在尝试在一个html页面上实现多个单独的D3.js v4图表（即条形图和折线图）。

Answer 1

为每个图表创建一个新的SVG或Canvas元素，但为每个图表指定一个唯一的ID。为每个图表创建不同的基本选择。

例如：

var barChart = d3.select('body').append('svg')
    .attr('id', 'bar-chart');

var lineChart = d3.select('body').append('svg')
    .attr('id', 'line-chart');

现在，您可以使用barChart作为条形码代码的基本选择，并使用lineChart作为折线图代码的基本选择。