Add text label to d3 node in Force layout

Right now, you are appending the text elements to the circle elements, and that simply won’t work. When you write… var label = nodes.append(“svg:text”) You’re appending the texts to the nodesselection. However, you have to keep in mind what nodes is: var nodes = svg.selectAll(“circle”) .data(dataset.nodes) .enter() .append(“circle”) Thus, you are appending the texts to … Read more

Add text label to d3 node in Force directed Graph and resize on hover

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

Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?

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

Highlight selected node, its links, and its children in a D3 force directed graph

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