StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POD3: Multiple force layouts in one SVG?
text
Body
copied!<p>I have seen solutions for creating multiple force layouts on a single page, where each layout is contained in its own SVG; however, I have been unable to find help on how to include multiple force layouts within a single SVG. Each layout has its own data associated with it.</p> <p>An example of what I am currently doing can be found at <a href="http://jsfiddle.net/connorgr/SRAJa/" rel="nofollow">http://jsfiddle.net/connorgr/SRAJa/</a>. I have included the key part of the code below. The end result looks an awful lot like the force layout was never activated (or deleted) for all but the last node/link data. Is there any way to prevent this from happening?</p> <p>I am unable to merge the data together and use only one layout because of the use case for the visualization I'm building.</p> <pre><code>/** * Creates a force layout in svgObj for each element in graphs * (svg) svgObj - The SVG to include the force layouts in * (json) graphs - An array of {"nodes":[...],"links":[...]} objects */ function generateMultiForce(svgObj, graphs) { for(var i=0; i < graphs.length; i++) { var graph = graphs[i]; var graphArea = svgObj.append("g"); var force = d3.layout.force() .charge(-200) .linkDistance(45) .size([width, height]) .nodes(graph.nodes) .links(graph.links) .start(); var link = graphArea.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link"); var nodeGroup = graphArea.selectAll("g") .data(graph.nodes) .enter().append("g") .call(force.drag); var node = nodeGroup.append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }); var text = nodeGroup.append("text") .attr("x", 8) .attr("y", ".31em") .text(function(d) { return d.name; }); force.on("tick", function() { link .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; }); nodeGroup.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; }); }); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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