force-layout

Place pie charts on nodes of force directed layout graph in D3

由 我的梦境 提交于 2020-01-19 12:53:05
问题 I would like to place pie charts on the node of a D3 force directed layout graph using D3.js. This is a common visualization in population genetics, see for example http://mathildasanthropologyblog.files.wordpress.com/2008/06/as3.jpg I've started with a very basic graph plot: <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="d3/d3.v3.js"></script> </head> <body> <script type="text/javascript"> graph = { "nodes":[{"proportions": [{"group": 1, "value": 1}, {"group": 2,

d3js - Force-Directed Graph: Delete node that only link to itself

由 余生颓废 提交于 2020-01-17 10:09:07
问题 I am trying to do the Force-Directed Graph from this example but my data is really big (5000 nodes) so I want to remove some nodes that do not link to any other nodes. However, in my JSON, every node has at least 1 link (that link to itself). This is an example of my data: {"directed": false, "graph": {}, "nodes": [{"id": 0}, {"id": 1}, {"id": 2}, {"id": 3}, {"id": 4}, {"id": 5}, {"id": 6}, {"id": 7}, {"id": 8}, {"id": 9}, {"id": 10}, {"id": 11}, {"id": 12}], "links": [{"source": 0, "target":

Adding new nodes to a clustered force layout

由 混江龙づ霸主 提交于 2020-01-15 05:35:55
问题 Using the Mike Bostock example for clustered nodes, I'm trying to create a way to push a new node to the flock. function addNode(){ nodes.push({ cluster: 2, radius: 5, x: Math.cos(3 / 4 * 2 * Math.PI) * 200 + width / 2 + Math.random(), y: Math.sin(5 / 4 * 2 * Math.PI) * 200 + height / 2 + Math.random() }); console.log(nodes); update(); } $('button').click(function(){ addNode(); }) I'm creating new nodes using the same values for cluster and radius but with random values for x & y. Here is the

Iterate over already created nodes in D3js

由 孤街浪徒 提交于 2020-01-12 03:33:30
问题 I am using a force-directed graph and am adding newly created nodes to the graph. This works perfectly fine. My node has a property called "state" that keeps changing. The problem I'm facing is that, in my code, the condition to check the "state" is only checked when a new node comes in. When theres an update, my JSON is updated with the state but the execution doesn't reach the code for checking the state. Find my code below: function buildGraph() { // Update link data link = link.data(links

Moving fixed nodes in D3

由 微笑、不失礼 提交于 2020-01-11 02:32:25
问题 I have nodes in a D3 force-directed layout that are set to . fixed = true. If I set the .x or .y values, the nodes themselves don't move to their new position. Here's my function: function fixNode(idArray, locationX, locationY) { for ( x = 0; x < idArray.length; x++ ) { for ( y = 0; y < nodes.length; y++ ) { if (nodes[y].id == idArray[x]) { nodes[y].fixed = true; nodes[y].x = 50; nodes[y].y = 50; break; } } } } UPDATE 1: Here is the working function based on Jason's advice: function fixNode

d3.js: How to remove nodes when link-data updates in a force layout

由 时间秒杀一切 提交于 2020-01-09 19:10:32
问题 I'm using a force layout graph to show a network but I have problems when updating my data. I already check How to update elements of D3 force layout when the underlying data changes, and of course the "Modifying a Force Layout" as well as the "General Update Pattern" by " mbostock " from D3.js (unfortunately, I can only post a maximum of two links...). My code based on the "Mobile Patent Suits" example with some modifications and differences. You can check my full code here: <!DOCTYPE html>

how to update foci dynamically in multi-foci force-layout in d3.js

由 泪湿孤枕 提交于 2020-01-05 12:31:16
问题 I have a multi-foci layout and couldn't find a way to dynamically set the foci. In the code below using a subset of data, I wish to be able to toggle between id-group and familiarity, which would change the chart from 3 clusters of bubbles to 5 clusters of bubbles. Current foci are hard-coded, which prevent toggling from working. var data = [ {"id": 0, "name": "AngularJS", "familiarity":0,"r": 50 }, {"id": 0, "name": "HTML5", "familiarity":1,"r": 40 }, {"id": 0, "name": "Javascript",

D3.js: Transferring the value of one attribute to another attribute, for a specific FDG node?

由 核能气质少年 提交于 2020-01-04 06:07:09
问题 I'm using a force directed graph that appends circles to each node. As part of the node creation, I first set the radius "r" of each node circle to a default and consistent value (defaultNodeSize = 10). This successfully draws a cluster where all related nodes are the same size. // Append circles to Nodes node.append("circle") .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }) .attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return

What ever happend to the d3j.s force directed graph cluster example see on this image?

由 杀马特。学长 韩版系。学妹 提交于 2020-01-04 02:56:28
问题 What ever happend to the d3.js example on this image. The force directed graph cluster. Second row, 3rd column? http://vis.stanford.edu/papers/d3 回答1: I guess what you are interested in is the shapes surrounding groups of nodes. The following examples implement it : force-multi-foci with convex hulls alpha-shapes aka concave hulls in d3 Hope this helps, 来源： https://stackoverflow.com/questions/14571538/what-ever-happend-to-the-d3j-s-force-directed-graph-cluster-example-see-on-this

Speed up d3 force layout with many nodes and links

由 巧了我就是萌 提交于 2020-01-03 17:01:28
问题 I wanted to produce a visualization that contains a good deal of nodes with the d3 force layout (more than 500 hundred nodes). While it is working correctly with as much as 200 hundred nodes it gets very slow with about 500, in the sense that the layout hiccups from one frame to the next and events like mouseover on nodes are far from being responsive. This made me ask several questions. Is there some kind of limit in the number of nodes after which it is not recommended to use the force
订阅 force-layout