Проблемы с позиционированием нескольких графиков d3 на странице html

Question

Мне нужно разместить несколько (в конечном счете 4, но я начинаю с двух здесь) графиков d3 на одной веб-странице. После this tutorial я создал две дивы:

<div id="donut"></div> 
<div id="line-graph"></div> 

А потом я прилагаемую графики их соответствующих дивы, как так:

var svg = d3.select("#line-graph").append("svg") 

И

var svg = d3.select("#donut").append("svg") 

Тем не менее, они по-прежнему на вершине друг на друга. Что мне не хватает?

Я знаю, что есть другие люди, у которых была эта проблема, но многие из этих вопросов либо остались без ответа, либо ответ не решит мою проблему. Вы можете видеть, что я говорю о here.

Заранее спасибо.

Answer 1

Оба ваших сценария объявляют глобальные переменные с именем 'svg', а затем ссылаются на эту глобальную переменную в обратном вызове после загрузки файла. Если вы проверите свои графики, вы увидите, что они на самом деле находятся как на одном элементе SVG, так и на элементе SVG, который должен быть включен в линейный граф , пуст.

Вам нужно переименовать переменные во втором скрипте, чтобы они имели разные имена, чем переменные в первом скрипте.