force-layout | 易学教程

D3 Force Layout Graph - Self linking node

阅读更多关于 D3 Force Layout Graph - Self linking node

问题 Using a force directed graph, how do you get a link to actually show up when the target and source are the same node. So basically just a nice little loop indicating that such an edge exists. There are two D3 examples that I already used or tried to use: I'm using http://bl.ocks.org/d3noob/5155181 to show direction, and the little endpoint arrow will show up pointing at itself, but no link line. http://bl.ocks.org/GerHobbelt/3616279 does does allow for self referencing and I even sort of got

Does Force-Directed Layout of d3-js support image as node?

阅读更多关于 Does Force-Directed Layout of d3-js support image as node?

问题 d3 has a demo of a Force-Directed Graph Layout. Instead of circles, I want all nodes in the graph to be images. so, I changed .append("svg:circle") .attr("class", "node") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", 5) .style("fill", function(d) { return fill(d.group); }) .call(force.drag); to .append("xhtml:img") .attr("src", "http://a577.phobos.apple.com/us/r1000/081/Purple/12/61/13/mzi.lgqdzwfu.png") .call(force.drag); But I can not see any

Introducing Arrow(directed), in Force Directed Graph d3

阅读更多关于 Introducing Arrow(directed), in Force Directed Graph d3

问题 I am using the force-directed graph in the sample here - http://bl.ocks.org/mbostock/4062045 But since my data is directed, I need the links in the graph to be represented as arrow connections. Maybe like in, http://bl.ocks.org/d3noob/5141278. Can someone please suggest the alterations or additions that create a directed graph as in http://bl.ocks.org/mbostock/4062045 I am new to D3, and I couldn't find a solution, maybe its trivial, but a little help is appreciated. 回答1: Merging these two

clicking a node in d3 from a button outside the svg

阅读更多关于 clicking a node in d3 from a button outside the svg

I have created a force directed graph using D3 and displayed the id of the nodes in a normal div. I need to highlight the node whose id has been clicked in the div. I have searched the id of the node and using normal javascript tried to click it but it does not work. mbostock More generally, if the user interacts with element A , how do you select (and then modify) related elements B ? There are many ways of achieving this, but here are three common approaches. Option 1. For one-to-one mappings, select by id. If each element in A has exactly one corresponding element in B , you can select the

d3.js: “Cannot read property 'weight' of undefined” when manually defining both nodes and links for force layout

阅读更多关于 d3.js: “Cannot read property 'weight' of undefined” when manually defining both nodes and links for force layout

问题 I tried setting both nodes and links at the same time this way: var force = d3.layout.force() .size([w, h]) .nodes(nodes) .links(connections) .start(); nodes = [{"name":"data_base_id", "kind":"subgenre"},...] connections = [{"source":"name_of_node", "target":"name_of_other_node"},...] I have data that may not have connections, so it is necessary to defined the nodes, so that all of the nodes get rendered. And defining the genres is pretty easy. but I get this error; Cannot read property

Align Marker on node edges D3 Force Layout

阅读更多关于 Align Marker on node edges D3 Force Layout

I'm trying to implement a d3 force layout and can't figure out how to position the markers of my links in a proper way. Here is what I got so far: var links = force_data.force_directed_data.links; var nodes = {}; // Compute the distinct nodes from the links. links.forEach(function (link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); }); console.log(nodes); var width = 1000, height = 1000; var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height])

arrows on links in d3js force layout

阅读更多关于 arrows on links in d3js force layout

问题 I'm using the force layout to represent a directed unweighted network. My inspiration comes from the following example: http://bl.ocks.org/mbostock/1153292 I tried to make nodes of different sizes, but I have a little problem. The marker used to draw the arrow on each link points to the center of the circle. If the circle is too big it covers completely the arrow. How can I handle this? 回答1: If you will use a <line> instead of <path> , the following should work for you, I have it working in

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 canvas. After this, some serious physics math is taking over, simulating a gravitational pull which sends

How to make force layout graph in D3.js responsive to screen/browser size

阅读更多关于 How to make force layout graph in D3.js responsive to screen/browser size

问题 I have a graph using force layout, but it has a fixed width w and height h : var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) var force = d3.layout.force() .nodes(nodes) .links(links) .charge(-1600) .linkDistance(45) .size([w, h]); which results in a svg graph that does not scale or down despite of changes in screen or browser window size. In order to make it responsive (i.e. automatically resizes itself), I tried using viewBox and

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 and delete labeled, image-bearing nodes to that graph, specifying connections between them I've taken