Databases
StackOverflow2013
Postsdbo
POMultiple instances of d3 force layout on the same page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple instances of d3 force layout on the same page
    primarykey
    data
    text
    <p>My goal is to use the d3 force layout to display two different networks that share the same nodes. For example, among four people, you could define a social network and a genealogy network; the nodes would be the same (people) but the links (relationships) could be different. <strong>Despite creating two separate force layouts, two separate svg canvases, and trying to define separate variables, the nodes are sharing x and y positional information.</strong> Here is a minimal example, in which dragging nodes on one network changes their positions in the other network: <a href="http://amath.colorado.edu/student/larremore/nodesSharingPositiond3" rel="nofollow">http://amath.colorado.edu/student/larremore/nodesSharingPositiond3</a></p> <p>Below, I posted the function that is called to create one of the networks, and the code to create the other is very similar, but uses different variable names in all instances. The commented code for creating both networks can be found in <a href="http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js" rel="nofollow">http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js</a> and the script used to define variables can be found in /driver/minimalScript.js &lt;-- I don't have enough reputation to link this directly. My apologies!</p> <p>Somewhere in the way d3.force works, positional information is global or being selected globally, or something. Could anyone shed light on this? I am interested both in a solution to keeping the positional information separated as well as in understanding how d3.force handles and updates position computations. </p> <pre><code>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&lt;YLinks.length; i++) { if (YLinks[i].link2 &gt; 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(); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVividD
    1. USDBLarremore
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMultiple instances of d3 force layout on the same page
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMultiple instances of d3 force layout on the same page
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMultiple instances of d3 force layout on the same page
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI am trying to do the same thing as you: sync the node positions of two force layouts on the same page. I have two force layouts which works thanks to the reply by Alex Reynolds. However, I do not get where to set the hooks for the position sync. Since the links to DBLaremore's approach do not work anymore, has anyone a hint where to start or maybe links to another example?
      singulars
      1. POMultiple instances of d3 force layout on the same page
      1. UStty56
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload