Question

我尝试在同一页面上添加多个D3图表，即饼图，条形图和使用CSV或JSON格式的不同数据的树形布局。但我无法在同一页面上实现所有这三个图表。当我在同一页面上链接多个布局时，我得到一个空白页面。

我尝试使用以下HTML和JS

将每个图表附加到不同的div中

HTML

<div id="piediv"></div>
<div id="bardiv"></div>
<div id="treediv"></div>

JS

var svg = d3.select("#piediv").append("svg")
var svg = d3.select("#bardiv").append("svg")
var svg = d3.select("#treediv").append("svg")

上面的所有 JS 行都在各自的JS文件中。 pie.js，bar.js和tree.js

Answer 1

首先，我建议您使用不同的名称声明svg变量。

我为你做了一个类似问题的小提琴;更多细节，我以这种方式在同一页面中创建了两个圆环图：

我创建了两个不同的<div>，其中包含两个不同的ID

<div id="chart"></div>
<div id="chart2"></div>

我还创建了两个不同的svgs（名称不同）

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var svg2 = d3.select("#chart2").append("svg")
   .attr("width", width)
   .attr("height", height)
   .append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

查看fiddle了解详情

让我知道。

在同一页面上实现多个D3布局

1 个答案: