force-layout

I am newbie to D3. I am using force directed graph. I want to add two different type of shapes at node's places. My json is following: { "nodes":[ {"name":"00:00:00:00:00:00:00:01","group":0,"shape":1}, {"name":"00:00:00:00:00:00:00:02","group":1,"shape":1}, {"name":"00:00:00:00:00:00:00:03","group":2,"shape":1}, {"name":"00:00:00:00:00:00:00:11","group":0,"shape":0}, {"name":"00:00:00:00:00:00:00:21","group":1,"shape":0}, {"name":"00:00:00:00:00:00:00:31","group":2,"shape":0}, {"name":"00:00:00:00:00:00:00:32","group":2,"shape":0}, {"name":"00:00:00:00:00:00:00:12","group":0,"shape":0}, {

Mike Bostock has an example regarding updating a force layout. The example is based on v3 — how can the same functionality be replicated in v4? Here's my (pitiful) attempt . I've read the changes to selections in the v4 Changelog, but the merge call is still confusing. In particular, it's not clear to me how the data join interacts with the simulation nodes() and links() call. var width = 300, height = 200; var color = d3.scaleOrdinal(d3.schemeCategory20); var nodes = [], links = []; var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; })) .force(

I'm using one of the force layout examples ( http://bl.ocks.org/1153292 ) to show a network on my web site. I allow the user to choose which type of links to see at any given time. I notice that when I choose to see link type A, then add link type B and then remove link type A the remain links of type B are presented with A colors. This is the code that runs to add the links to the svg diagram. I am changing the array this.links by adding and removing links from it. As you can see I set the class attribute but it is not updating - it remains of type of link A. var path = svg.append("svg:g")

I'm using this nice force layout from Flowingdata.com to create a network diagram. My diagram currently shows between 5 and 750 nodes with their relations. It works great with some custom changes to fit my needs. However one thing I can't get to work. I have a viewBox with preserveAspectRatio to auto fit the container it is in. But depending on the amount of nodes there are always some nodes around the edges (mainly top and buttom) that get cut off. And if there are very little nodes, it shows them in the middle with huge empty space around it (it's a big container it's in). Is there any way

I would like to respond to keystroke events directed at nodes in my force layout. I've tried adding all the variants of "keystroke", "keypress", "keyup", "keydown" that I could think of, but none of them is firing. My mouse events fire just fine. I couldn't find any keystroke events in the d3 source.... is there a way to capture key strokes? nodes.enter().append("circle") .on("click", function(d) { return d.clickHandler(self); }) .on("mouseover", function(d) { return d.mouseOverHandler(self); }) .on("mouseout", function(d) { return d.mouseOutHandler(self); }) .on("keyup", function(d) { console

I'm trying to make a force directed graph using d3.layout.force , and I need the container to be resizable - that is I'd like to be able calculate appropriate charge and linkDistance values based on the size, or have d3 do it for me in some magical way. I've made an attempt (link: http://jsfiddle.net/VHdUe/6/ ) which only uses nodes. I'm setting the charge to a value that's based on the number of nodes that would fit across the radius of the circle that it tends to be shaped like. The solution works for some middle-sized containers, but if you click resize a few times, you can see it doesn't

So i have a page already which draws a force directed graph, like the one shown here . And that works fine. I'm using the JS from here , with a few tweaks to spread out the nodes slightly nicer. These are more or less the only differences: d3.json("force.json", function(json) { var force = d3.layout.force() .gravity(0.1) .charge(-2000) .linkDistance(1) .linkStrength(0.1) .nodes(json.nodes) .links(json.links) .size([w, h]) .start(); Where reducing the link strength seems to make the links more like springs, so it becomes similar to the Fruchterman & Reingold technique often used. This works