Как получить все диаграммы d3.js на одной странице

Question

У меня есть piechart.html и barchart.html, и я включил их в другой html. Оба графика накладываются друг на друга. Я использовал svg в обоих пирогах и bar.I думаю, что это вопрос .Как я могу решить эту проблему

My pie code: 
=========== 
var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

My Bar code: 
========== 
var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")"); 

заранее спасибо

Answer 1

переименовывать переменные для каждой диаграммы:

var svgPie = d3.select("body").append("svg").attr("class","pie-chart") 

и

var svgBar = d3.select("body").append("svg").attr("class","bar-chart") 

Затем применяйте логику на каждом графике отдельно.

Answer 2

Лучше использовать бутстрап, чтобы разделить страницу на разделы и вызвать функцию рендеринга диаграммы (в зависимости от типа библиотеки, которую вы создали с помощью d3), с идентификаторами div.

var renderContainer = d3.select ('#' + renderContainerId);

функция визуализации (renderContainer) {

renderContainer.append ('SVG')

больше кода идет здесь присоединяет прямоугольники, пирожки и т.д ... в SVG

}