Mein Ziel ist es, das d3-Force-Layout zu verwenden, um zwei verschiedene Netzwerke anzuzeigen, die sich dieselben Knoten teilen. Beispielsweise können Sie unter vier Personen ein soziales Netzwerk und ein Genealogie-Netzwerk definieren. Die Knoten wären die gleichen (Personen), aber die Verknüpfungen (Beziehungen) könnten unterschiedlich sein.Obwohl zwei separate Force-Layouts, zwei separate SVG-Canvases und der Versuch, separate Variablen zu definieren, erstellt wurden, teilen die Knoten die Positionsinformationen x und y. Hier ist ein minimales Beispiel, in dem das Ziehen von Knoten in einem Netzwerk ihre Position im anderen Netzwerk ändert:http://amath.colorado.edu/student/larremore/nodesSharingPositiond3

Unten habe ich die Funktion angegeben, die zum Erstellen eines der Netzwerke aufgerufen wird, und der Code zum Erstellen des anderen ist sehr ähnlich, verwendet jedoch in allen Fällen unterschiedliche Variablennamen. Den kommentierten Code zum Erstellen beider Netzwerke finden Sie inhttp://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js und das Skript zum Definieren von Variablen befindet sich in /driver/minimalScript.js <- Ich habe nicht genug Reputation, um dies direkt zu verknüpfen. Entschuldigen Sie!

Irgendwo in der Funktionsweise von d3.force sind Positionsinformationen global oder werden global ausgewählt oder so. Könnte jemand Licht ins Dunkel bringen? Ich interessiere mich sowohl für eine Lösung, um die Positionsinformationen getrennt zu halten, als auch für das Verständnis, wie d3.force Positionsberechnungen handhabt und aktualisiert.

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();
}