force-layout | 易学教程

Calm down initial tick of a force layout

阅读更多关于 Calm down initial tick of a force layout

问题 I\'ve just started dabbling with d3, and find the learning curve quite steep. The process is completely different than what I am used to, and the mathematics are mostly way over my head. Anyway, my project consists of a force layout representing map of integrations between systems. This part works out awesomely well, but I do have one major concern, which is also represented in the force directed layout demo on Michael Bostocks site: When nodes are initiated, they seem to be rendered off

D3 force directed layout with bounding box

阅读更多关于 D3 force directed layout with bounding box

问题 I am new to D3 and having trouble setting the bounds for my force directed layout. I have managed to piece together (from examples) what I would like, but I need the graph to be contained. In the tick function, a transform/translate will display my graph correctly, but when i use cx and cy with Math.max/min (See commented code), the nodes are pinned to the top left corner while the lines are contained properly. Here is what I have below... what am I doing wrong?? var w=960, h=500, r=8, z = d3

Adding new nodes to Force-directed layout

阅读更多关于 Adding new nodes to Force-directed layout

问题 First question on Stack Overflow, so bear with me! I am new to d3.js, but have been consistently amazed by what others are able to accomplish with it... and almost as amazed by how little headway I\'ve been able to make with it myself! Clearly I\'m not grokking something, so I hope that the kind souls here can show me the light. My intention is to make a reusable javascript function which simply does the following: Creates a blank force-directed graph in a specified DOM element Allows you to

Add text/label onto links in D3 force directed graph

阅读更多关于 Add text/label onto links in D3 force directed graph

问题 I\'ve been working on modified force directed graph and having some problems with adding text/label onto links where the links are not properly aligned to nodes. How to fix it? And how I can add an event listener to an SVG text element? Adding .on(\"dblclick\",function(d) {....} just doesn\'t work. Here\'s the code snippet: <style type=\"text/css\"> .link { stroke: #ccc; } .routertext { pointer-events: none; font: 10px sans-serif; fill: #000000; } .routertext2 { pointer-events: none; font:

Is there a way to zoom into a D3 force layout graph?

阅读更多关于 Is there a way to zoom into a D3 force layout graph?

问题 D3 has a force directed layout here. Is there a way to add zooming to this graph? Currently, I was able to capture the mouse wheel event but am not really sure how to write the redraw function itself. Any suggestions? var vis = d3.select(\"#graph\") .append(\"svg:svg\") .call(d3.behavior.zoom().on(\"zoom\", redraw)) // <-- redraw function .attr(\"width\", w) .attr(\"height\", h); 回答1: Update 6/4/14 See also Mike Bostock's answer here for changes in D3 v.3 and the related example. I think this

semantic zooming of the force directed graph in d3

阅读更多关于 semantic zooming of the force directed graph in d3

问题 Many cases have been shown for force directed graph geometric zooming by SVG Geometric Zooming. In geometric zooming, I only need to add a transform attribute in zoom function. However, in semantic zooming, if I only add a transform attribute in node, links won\'t connect to node. So, I am wondering whether there exist a solution for geometric zooming for force directed graph in d3. Here is my example with geometric zooming following previous case. I have two problems: When I zoom out, then

Fix Node Position in D3 Force Directed Layout

阅读更多关于 Fix Node Position in D3 Force Directed Layout

问题 I want some of the nodes in my force-directed layout to ignore all forces and stay in fixed positions based on an attribute of the node, while still being able to be dragged and exert repulsion on other nodes and maintain their link lines. I thought it would be as simple as this: force.on(\"tick\", function() { vis.selectAll(\"g.node\") .attr(\"transform\", function(d) { return (d.someAttribute == true) ? \"translate(\" + d.xcoordFromAttribute + \",\" + d.ycoordFromAttribute +\")\" : \

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

阅读更多关于 Highlight selected node, its links, and its children in a D3 force directed graph

问题 I am working on a force directed graph in D3. I want to highlight the mouseover\'d node, its links, and its child nodes by setting all of the other nodes and links to a lower opacity. In this example, http://jsfiddle.net/xReHA/, I am able to fade out all of the links and nodes then fade in the connected links, but, so far, I haven\'t been able to elegantly fade in the connected nodes that are children of the currently mouseover\'d node. This is the key function from the code: function fade

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

阅读更多关于 Highlight selected node, its links, and its children in a D3 force directed graph

I am working on a force directed graph in D3. I want to highlight the mouseover'd node, its links, and its child nodes by setting all of the other nodes and links to a lower opacity. In this example, http://jsfiddle.net/xReHA/ , I am able to fade out all of the links and nodes then fade in the connected links, but, so far, I haven't been able to elegantly fade in the connected nodes that are children of the currently mouseover'd node. This is the key function from the code: function fade(opacity) { return function(d, i) { //fade all elements svg.selectAll("circle, line").style("opacity",