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

Question

我可以帮助您翻译中文。这段内容涉及编程，讲述了作者尝试在同一页上添加多个D3图表，包括饼状图、柱状图和树形布局，使用不同的CSV或JSON格式数据。但是，作者无法在同一页上实现这三个图表。当链接超过一个布局时，页面会变成空白页。作者尝试使用以下HTML和JS将每个图表附加到不同的div中。

<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。

- Aditya Singh

---

你刚刚两次覆盖了你的SVG变量。 - thatOneGuy

@thatOneGuy 尽管这可能会破坏其他一些代码，但不应导致 OP 报告的空白页面。 - altocumulus

@EricCartmann 请设置一个 [mcve] 来展示效果。 - altocumulus

Answer 1

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

我为您创建了一个fiddle，其中有一个类似的问题；更详细地说，我以以下方式在同一页中创建了两个环形图：

我创建了两个不同的<div>，分别具有两个不同的id。

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

我还创建了两个不同名称的 SVG 文件。

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

查看示例以获取更多详细信息。

请告诉我。

- Giordano