force-layout | 易学教程

D3js - Force directed graph - advanced highlighting of neigbour nodes and links, is it possible?

阅读更多关于 D3js - Force directed graph - advanced highlighting of neigbour nodes and links, is it possible?

问题 I've managed to get highlight working on my force directed graph, with help of this tutorial from Mike Bostock. Now for further procedure in my idea and needs of my graph, I'm little bit stuck, firstly because I'm still nooby about d3js and second, I did non find anything similar yet. To clear out what my intentions, you can see current graph with highlighting on following link: http://jsfiddle.net/2FwSY/ It works nicely, but my idea is little bit advanced. I was wondering if it is possible

How do I remove all children elements from a node and then apply them again with different color and size?

阅读更多关于 How do I remove all children elements from a node and then apply them again with different color and size?

So I have the next force layout graph code for setting nodes, links and other elements: var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); graphData.links.forEach(function (d) {

D3 force directed graph, different shape according to data and value given?

阅读更多关于 D3 force directed graph, different shape according to data and value given?

问题 I've made a force directed graph and I wanted to change shape of nodes for data which contains "entity":"company" so they would have rectangle shape, and other one without this part of data would be circles as they are now. You can see my working example with only circle nodes here: http://jsfiddle.net/dzorz/uWtSk/ I've tried to add rectangles with if else statement in part of code where I append shape to node like this: function(d) { if (d.entity == "company") { node.append("rect") .attr(

How to place text on the circle when using D3.js force layout?

阅读更多关于 How to place text on the circle when using D3.js force layout?

<!DOCTYPE html> <html> <meta charset="utf-8"> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } </style> <body> </body> <script src="d3.v3.min.js"></script> <script> var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); d3.json("data.json", function(error, graph) { force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data

Force-directed layout implementation in C++

阅读更多关于 Force-directed layout implementation in C++

问题 Are you aware of an open source implementation of force-directed layout in C++ used for GUIs? Preferably BSD/MIT/Apache or other (non-GPL) license. 回答1: The excellent Boost.Graph library provides a wide range of algorithms, among which a few layout algorithms. I'd recommend using either Kamada-Kawai spring layout or Fruchterman-Reingold force-directed layout. Boost licence is very permissive so don't worry about that. 回答2: The first Google result is VTK. Another takes me to vtkGraphLayoutView

Uncaught TypeError: Cannot call method 'push' of undefined (d3 force layout)

阅读更多关于 Uncaught TypeError: Cannot call method 'push' of undefined (d3 force layout)

I can't figure out why I'm getting this error for the life of me (using a force layout). It started when I switched over to reading my nodes from a json file. If I uncomment the lines below it doesn't throw an error. If I leave as is, I get "Cannot call method 'push' of undefined". I'm not sure what the issue is. Am I missing anything? <html> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> <script> d3.json("http://katejustin.com/autosys1.json", function(data) { //var nodes = {}; //data.links.forEach(function(link) { // link.source = nodes[link.source] ||

d3.js static force layout

阅读更多关于 d3.js static force layout

I am using d3.js and would like the force layout to be NOT random every time I load up the page. I have already read over a few questions and I set the node position but the layout still is random. Just set static x and y positions in your node objects. var graph = { "nodes": [{ "name": "1", "rating": 90, "id": 2951, x: 5, //Any random value y: 10 //Any random value }, { "name": "2", "rating": 80, "id": 654654, x: 15, y: 20 ------------------ ------------------- }], "links": [{ "source": 5, "target": 2, "value": 6, "label": "publishedOn" }, { "source": 1, "target": 5, "value": 6, "label":

How to update elements of D3 force layout when the underlying data changes

阅读更多关于 How to update elements of D3 force layout when the underlying data changes

问题 I'm using one of the force layout examples (http://bl.ocks.org/1153292) to show a network on my web site. I allow the user to choose which type of links to see at any given time. I notice that when I choose to see link type A, then add link type B and then remove link type A the remain links of type B are presented with A colors. This is the code that runs to add the links to the svg diagram. I am changing the array this.links by adding and removing links from it. As you can see I set the

What is the difference between alphaTarget and alphaMin?

阅读更多关于 What is the difference between alphaTarget and alphaMin?

The description from the API is confusing. I expect target to be the value where the simulation stops ticking, but what target does is not defined in the API. Also alpha itself is not defined in the API but I found that on another website: https://roshansanthosh.wordpress.com/2016/09/25/forces-in-d3-js-v4/ An important aspect of simulations is alpha. alpha is a number between 0 and 1 and defines how far the simulation has progressed. When a simulation starts alpha is set to 1 and this value slowly decays, based on the alphaDecay rate, until it reaches the alphaTarget of the simulation. Once

Transition from one forced-directed graph to another graph in d3js

阅读更多关于 Transition from one forced-directed graph to another graph in d3js

I have two Collapsible Force Trees for same nodes. I haven't seen an example that we can transit from one tree to another with nodes transition and edges reconstruction in d3js. Is there any way to do that? Another relevant question, could we initialize the position of each node for forced-directed graph? EDIT: Here is an example . I have two trees, the link is one, and I have another tree with same molecules but different tree structure. I am thinking it will be nice if I can animate between different trees for same molecules or entities. In principle, these are the steps to follow. Stop the