在同一頁上實現多個D3佈局

我試圖在CSV或JSON格式中使用不同數據在同一頁面上添加多個D3圖形，即餅圖，條形圖和樹形佈局。但我無法在同一頁面上實現所有這3個圖表。當我在同一頁面上鍊接多個佈局時，我會看到一個空白頁面。在同一頁上實現多個D3佈局

我試圖每個圖表附加在一個不同的div使用以下HTML和JS

HTML

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

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

所有JS線以上是他們各自的JS fil es viz。 pie.js，bar.js和tree.js

來源

2016-11-21 Aditya Singh

你只是改寫你的SVG變量兩次 – thatOneGuy

@thatOneGuy雖然這可能會破壞一些其他的代碼，它不應該導致一個空白頁如由OP報道。 – altocumulus

@EricCartmann請設置一個[mcve]展示效果。 – altocumulus

首先，我建議你用不同的名字聲明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更多細節

讓我知道。

來源

2016-11-21 11:23:00 Giordano

在同一頁上實現多個D3佈局

回答

相關問題