force-layout

问题 I am using d3.js with the force layout. Now, with the help of the dynamically changing array data it is possible to highlight nodes dynamically based on the array. Also with the code below i am able to show up dynamically the names of the nodes, which are part of the array, as a text. So, when the array has for example 3 entries, then 3 nodes are shown up and also 3 names of the nodes appear. Let's say their names are "a", "b", "c", so the text "a", "b", "c" appears on screen. Now, when i

问题 I adapted Ger Hobbelt's original work with the assistance of @Mark to add labels to the expanded nodes in a previous Stackoverflow post: Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example? When I added my own data to the reworked example I observe the most peculiar problem. See the new fiddle, below. Expand the orange node. Then expand the blue. Node 18 detaches from within the orange hull (the link for node 18 is gone! ) and there appears to be an invisible node in

问题 I use the d3.layout.force to visualize graph structures. And I want both node dragging feature and panning feature. (By 'panning', I mean something like google maps behavior.) As shown in several d3 examples, nodes can be made draggable by nodes.call(force.drag) . And panning can be implemented by d3.behavior.drag . However, it seems they can not be used simultaneously. Here is a code example: var width = 400, height = 300; var svg = d3.select('body').append('svg').attr({width: width, height:

问题 I just read through this post - Links and Arrowheads to terminate at borders of nodes in D3 - however i am struggling to map his answer (on his curved links) with my example which (i think actually) uses a simpler/different curved edge for my links. I have been working on a reproducible example of my problem, with force graph showing, for the last 20-30 minutes however for some reason the graph is not appearing (even though the code snippet is not throwing an error). It is inevitably a bunch

问题 Take this example: var graph = { "nodes": [ { "name": "Myriel", "group": 1 }, //0 { "name": "Napoleon", "group": 1 }, //1 { "name": "Mlle.Baptistine", "group": 1 }, //2 { "name": "Mme.Magloire", "group": 1 }, //3 { "name": "CountessdeLo", "group": 1 },//4 { "name": "Geborand", "group": 1 } // { "name": "Champtercier", "group": 1 } ], "links": [ { "source": 0, "target": 1, "value": 50}, { "source": 1, "target": 2, "value": 50}, { "source": 2, "target": 0, "value": 50}, { "source": 3, "target":

问题 I have a d3 force graph that is writing over (overwriting?) the text every time I delete a node. I think the resolution to solving this is to just remove the text labels in my update() function. However, I am not sure performance wise if that is going to be heavy if I have lots of nodes on the screen. I also am not sure why it is even happening in the first place. Here are the pieces of my code that I think have to do with the issue: function update() { // refresh list of selected nodes

问题 I want to achieve something like this: With the following attributes: groups are rounded rects, which never overlap every node group has a horizontal centered title at the top, at least one node, and at least one link every node has a label a type: source or target and a group every node can have multiple links the source of a link is always a source node, and the target is always a target node I have hard time to figure out how to implement this, since I started with d3.js yesterday...

问题 I am using the Force Directed Graph to build a kind of flow diagram. It works fine except that the nodes have no specific order. They are random. I would like the graph to follow a hierarchical order. var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(90) .gravity(0.6) .charge(-2000) .linkStrength(0.3); I want to give the nodes some (numerical) hierarchy. Not explicitly define their placement. Any help will be appreciated. 回答1: You can

问题 OBJECTIVE: append text to each node in a d3 force layout BUG: text is appended to the object (I think, see console) but not displayed on screen Here's the jsfiddle. node.append("svg:text") .text(function (d) { return d.name; }) // note that this works for // storing the name as the id, as seen by selecting that element by // it's ID in the CSS (see red-stroked node) .style("fill", "#555") .style("font-family", "Arial") .style("font-size", 12); I'd be so grateful for any thoughts. 回答1: You can

问题 I adapted Ger Hobbelt's excellent example of group/bundle nodes https://gist.github.com/GerHobbelt/3071239 as a JSFiddle here: https://jsfiddle.net/NovasTaylor/tco2fkad/ The display demonstrates both collapsible nodes and regions (hulls). The one tweak that eludes me is how to add labels to expanded nodes. I have successfully added labels to nodes in my other force network diagrams using code similar to: nodes.append("text") .attr("class", "nodetext") .attr("dx", 12) .attr("dy", ".35em")