Я пытаюсь разместить 2 древовидные диаграммы d3.js, как показано здесь http://bl.ocks.org/1249394 на одной странице. Оба дерева будут загружены разными данными из объектов Javascript. Первый появится через:
<div id="chart"></div>
и второе дерево будет загружено в:
<div id="chart2"></div>
И #chart, и #chart2 находятся на одной странице, причем первое дерево (#chart) отображается вверху страницы, а второе (#chart2) прямо под ним, так как именно так расположены элементы диаграммы. Для этого я дважды применил один и тот же код с http://bl.ocks.org/1249394. По одному на каждый элемент div, при этом единственное различие между двумя фрагментами кода заключается в расположении дерева, то есть дерева 1:#chart и дерева 2:#chart2.
Дерево 1:
var vis = d3.select("#chart").append("svg:svg")
Дерево 2:
var vis = d3.select("#chart2").append("svg:svg")
Все остальное остается прежним, включая имена переменных и функций. Это прекрасно работает, и обе диаграммы отображаются так, как должны, за исключением функции щелчка (последняя функция в коде:). Только второе дерево может сворачиваться и расширяться при щелчке узлов дерева, первое дерево больше не может делать это, первый больше не является интерактивным.
Как я могу это исправить?
