More generally, if the user interacts with element A, how do you select (and then modify) related elements B? There are many ways of achieving this, but here are three common approaches. Option 1. For one-to-one mappings, select by id. If each element in A has exactly one corresponding element in B, you can select … Read more
force.on(“tick”, function() { nodes[0].x = w / 2; nodes[0].y = h / 2; That should do it.
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
You are close. The drag event is initiated by a mousedown event with a namespace called drag. See: https://github.com/mbostock/d3/blob/master/src/behavior/drag.js#L5 So, to remove this you could do: d3.select(‘rect#no-drag’).on(‘mousedown.drag’, null);
Instead of placing the marker on an end, create your lines (<polyline> or <path>) with a single point in the middle of the line and use marker-mid to apply the arrowheads. This demo for this answer of mine uses this technique to create multiple interior points along the length of a path along with marker-mid. … Read more
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
After many long hours of being unable to get this working, I finally stumbled across a demo that I don’t think is linked any of the documentation: http://bl.ocks.org/1095795: This demo contained the keys which finally helped me crack the problem. Adding multiple objects on an enter() can be done by assigning the enter() to a … Read more
Use a smaller example outside of D3 to see how the SVG stuff works. Then just rebuild this structure using D3 and your custom data. <html> <body> <svg width=”600px” height=”400px”> <defs> <!– DEFINE AN ARROW THAT WE CAN PLACE AT THE END OF EDGES. –> <!– USE REFX TO MOVE THE ARROW’S TIP TO THE … Read more
Interesting question. This works by setting the link path normally, then recalculating the end position by backing off the length by the radius of the circle. First in the marker def, set the refX and refY to 0 (this is the current way it stays outside the circle): .attr(“refX”, 0) .attr(“refY”, 0) Then do: function … Read more
Update 6/4/14 See also Mike Bostock’s answer here for changes in D3 v.3 and the related example. I think this probably supersedes the answer below. Update 2/18/2014 I think @ahaarnos’s answer is preferable if you want the entire SVG to pan and zoom. The nested g elements in my answer below are really only necessary … Read more