You are adding a text element inside a circle, that won’t work. You can add groups under the svg element and then append the circle and a text in each group: // Create the groups under svg var gnodes = svg.selectAll(‘g.gnode’) .data(graph.nodes) .enter() .append(‘g’) .classed(‘gnode’, true); // Add one circle in each group var node … Read more
Well I could find the solution browsing through, posting it here for anyone needing help on this topic. The idea is to create an object of the graph and playing around with the nodes and links arrays. The JS code goes as: var graph; function myGraph(el) { // Add and remove elements on the graph … Read more
There’s a bounding box example in my talk on force layouts. The position Verlet integration allows you to define geometric constraints (such as bounding boxes and collision detection) inside the “tick” event listener; simply move the nodes to comply with the constraint and the simulation will adapt accordingly. That said, gravity is definitely a more … Read more
If you peruse the release notes, you’ll see a full explanation of everything that’s changed between the final release of 2.x (2.10.3) and the most recent release, 3.2.7. In particular, from release 3.2.2: Better handling of drag gestures in d3.behavior.drag, d3.behavior.zoom and d3.svg.brush by not preventing default behaviors or stopping propagation. For example, mousedown now … Read more
All the answers above misunderstood Øystein Amundsen’s question. The only way to stabilize the force upon it starts is to set node.x and node.y a proper value. Please note that the node is the data of d3.js, not the represented DOM type. For example, if you load nodes = [{“id”: a}, {“id”: b}, {“id”: c}] … Read more
Unfortunately, the answer to your question does not exist. There is no built-in mechanism in D3 that repels edges or minimizes edge crossings. You would think it wouldn’t be that hard to implement a charge on an edge, but here we are. Furthermore, there doesn’t seem to be any mechanism anywhere that reduces edge crossings … Read more
The problem is not within .size(), it’s that you are stating the SVG dimensions in .attr(“width”, w) .attr(“height”, h). Remove these two attributes and you’ll get it right… var svg = d3.select(“#viz”).append(“svg”) .attr(“id”, “playgraph”) //better to keep the viewBox dimensions with variables .attr(“viewBox”, “0 0 ” + w + ” ” + h ) .attr(“preserveAspectRatio”, … Read more
In my opinion, the force layout is unsuitable for the purpose of placing labels on a map. The reason is simple — labels should be as close as possible to the places they label, but the force layout has nothing to enforce this. Indeed, as far as the simulation is concerned, there is no harm … Read more
The error is because you are selecting the data objects (d.source and d.target) rather than the DOM elements associated with those data objects. You’ve got the line highlighting working, but I would probably combine your code into a single iteration, like this: link.style(“opacity”, function(o) { return o.source === d || o.target === d ? 1 … Read more
Set d.fixed on the desired nodes to true, and initialize d.x and d.y to the desired position. These nodes will then still be part of the simulation, and you can use the normal display code (e.g., setting a transform attribute); however, because they are marked as fixed, they can only be moved by dragging and … Read more