Несколько экземпляров принудительного макета d3 на одной странице

Моя цель — использовать макет d3 force для отображения двух разных сетей, которые используют одни и те же узлы. Например, среди четырех человек вы можете определить социальную сеть и генеалогическую сеть; узлы будут одинаковыми (люди), но связи (отношения) могут быть другими. Несмотря на создание двух отдельных силовых макетов, двух отдельных холстов svg и попытки определить отдельные переменные, узлы совместно используют информацию о позициях x и y. Вот минимальный пример, в котором перетаскивание узлов в одной сети изменяет их позиции в другой сети: http://amath.colorado.edu/student/larremore/nodesSharingPositiond3< /а>

Ниже я разместил функцию, которая вызывается для создания одной из сетей, а код для создания другой очень похож, но во всех случаях использует разные имена переменных. Код с комментариями для создания обеих сетей можно найти на странице http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js, а скрипт, используемый для определения переменных, можно найти в /driver/minimalScript.js ‹ — у меня недостаточно репутации, чтобы связать это напрямую . Мои извенения!

Где-то в том, как работает d3.force, позиционная информация является глобальной или выбирается глобально, или что-то в этом роде. Может ли кто-нибудь пролить свет на это? Меня интересует как решение для разделения позиционной информации, так и понимание того, как d3.force обрабатывает и обновляет вычисления позиции.

function makeYNet() {

// This populates the YactiveLinks variable with the proper YLinks. The goal is to be able to only display links whose value is above some threshold.
for (var i=0; i<YLinks.length; i++) {
    if (YLinks[i].link2 > thr) {
        YactiveLinks.push(YLinks[i]);
    }
}

// Add nodes and links to forceY
forceY
.nodes(YNodes)
.links(YactiveLinks);

// Draw lines
var Ylink = svgY.selectAll("line.link")
.data(YactiveLinks)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-width", 2.0);

// Draw nodes
var Ynode = svgY.selectAll("circle.node")
.data(YNodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", radius)
.attr("high",0)
.attr("id", function(d,i) {
      return ("idy" + i);
      })
.style("fill", function(d) { return color(d.group1); })
.call(forceY.drag)
;

// Define tick 
forceY.on("tick", function() {
          Ylink
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

          Ynode.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
          });

// Start 'er up
forceY.start();
}