Реализация нескольких макетов D3 на одной странице

Question

Я попытался добавить несколько графиков D3 на одну и ту же страницу, например, круговую диаграмму, график и схему дерева, используя разные данные в формате CSV или JSON. Но я не могу реализовать все эти 3 графика на одной странице. Когда я связываю более одного макета на одной странице, я получаю пустую страницу.

Я пытался добавить каждую таблицу в другой DIV, используя следующий HTML и JS

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 fil а именно: pie.js, bar.js и tree.js

Answer 1

Прежде всего, я предлагаю вам объявить переменные svg с другими именами.

Я сделал скрипку для вас с аналогичной проблемой; более подробно, я создал два пончик диаграммы в одной и ту же странице, таким образом:

я создал два различные <div> с двумя различных идентификаторами

<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 для более подробной информации

Позвольте мне знать.