force-layout

I just need a simple modification of the layout available here http://mbostock.github.io/d3/talk/20111116/force-collapsible.html The above visualization starts with all the nodes being expanded and so the user can visualize the complete hierarchy. The only problem is if the graph is dense, and the hairball that is formed is meaningless. I would be interested in starting with just the root node and gradually expanding all the nodes as needed. Is it feasible? How much code change is needed? The way I found that works for this is to call the click function on all of the children nodes. You can

I have a d3 force directed layout with data in a similar structure below. Is it possible to apply collapsible force layout such as http://bl.ocks.org/mbostock/1062288 to it? I want a node to be collapsed /expanded on click. { "nodes": [ {"x": 469, "y": 410}, {"x": 493, "y": 364}, {"x": 442, "y": 365}, {"x": 467, "y": 314}, ], "links": [ {"source": 0, "target": 1}, {"source": 1, "target": 2}, {"source": 2, "target": 0}, {"source": 1, "target": 3}, {"source": 3, "target": 2}, ] } If I understand correctly, perhaps this is what you are looking for. I edited the demo you linked to. Now when a

I am using a force based layout using D3 and was wondering if it's possible that when I click either the nodes or the labels, I am automatically taken to the url stored in that node/label? If it is, how can I achieve this? This is how the graph will actually look (labels indicate the URL itself) I am sharing the javascript code I am using to generate the D3 graph. In the code, I am currently using dummy data which will actually be replaced by URLs. document.addEventListener('DOMContentLoaded', function () { drawVisual(); }); function drawVisual() { //document.getElementById('myMSG').innerHTML

I've made a force directed graph with d3.js plugin, and I wanna color the nodes and the labels with the different color according to group which they belong. I've added scale for color: var color = d3.scale.category20(); and to node variable I've added: .style("fill", function(d) { return color(d.group); }) but all nodes are in the same color.. Here is my current situation: http://jsfiddle.net/WBkw9/ full script: var links = [ {source: "John", target: "Mike", group: "5"}, {source: "John", target: "Janice", group: "5"}, {source: "John", target: "Caleb", group: "5"}, {source: "John", target:

My goal is to use the d3 force layout to display two different networks that share the same nodes. For example, among four people, you could define a social network and a genealogy network; the nodes would be the same (people) but the links (relationships) could be different. Despite creating two separate force layouts, two separate svg canvases, and trying to define separate variables, the nodes are sharing x and y positional information. Here is a minimal example, in which dragging nodes on one network changes their positions in the other network: http://amath.colorado.edu/student/larremore

I'm building a tree structure (or rather modifying one of the examples with a set of my own data in my own json) and I'm trying to create some functionality: My tree's layout is that from the tree example: http://mbostock.github.com/d3/ex/cluster.html I am adding (to the circles) an onclick event which I would like to collapse the children of the clicked node. That is to say, when a user clicks the steelblue circle associated with a node, I want that nodes children to disappear. I've scoured the documentation and I haven't turned up anything which would allow me to make nodes collapse or