force-layout

Constrained d3.js Force display

由 不羁的心 提交于 2019-12-19 02:28:12
问题 I'd like to do something a little bit out of the ordinary with force layouts (for visualizing graphs). Constellations and all are fun to look at, but for timeseries data, it's not that helpful. I'd like to be able to constrain the layout by some axis, for example, by laying out the nodes according to the time they appear in a dataset, while still retaining the "bouncyness" of the visualization. Is this possible using d3? 回答1: To elaborate on my comment, yes, this is perfectly possible. The

How do I set the focal node in a D3.js Force Directed Graph?

由 时光总嘲笑我的痴心妄想 提交于 2019-12-18 17:34:10
问题 I have a data set that defines a number of nodes to use in a Force Directed Graph. It looks like... var nodeSet = [ {id: "N1", name: "Node 1", type: "Type 1", hlink: "http://www.if4it.com"}, {id: "N2", name: "Node 2", type: "Type 3", hlink: "http://www.if4it.com/glossary.html"}, {id: "N3", name: "Node 3", type: "Type 4", hlink: "http://www.if4it.com/resources.html"}, {id: "N4", name: "Node 4", type: "Type 5", hlink: "http://www.if4it.com/taxonomy.html"}, {id: "N5", name: "Node 5", type: "Type

How do i add two different shapes to D3 forced directed graph based on shape field value?

由 烂漫一生 提交于 2019-12-18 17:02:21
问题 I am newbie to D3. I am using force directed graph. I want to add two different type of shapes at node's places. My json is following: { "nodes":[ {"name":"00:00:00:00:00:00:00:01","group":0,"shape":1}, {"name":"00:00:00:00:00:00:00:02","group":1,"shape":1}, {"name":"00:00:00:00:00:00:00:03","group":2,"shape":1}, {"name":"00:00:00:00:00:00:00:11","group":0,"shape":0}, {"name":"00:00:00:00:00:00:00:21","group":1,"shape":0}, {"name":"00:00:00:00:00:00:00:31","group":2,"shape":0}, {"name":"00:00

D3 v4: Update force layout

由 穿精又带淫゛_ 提交于 2019-12-18 13:21:17
问题 Mike Bostock has an example regarding updating a force layout. The example is based on v3 — how can the same functionality be replicated in v4? Here's my (pitiful) attempt. I've read the changes to selections in the v4 Changelog, but the merge call is still confusing. In particular, it's not clear to me how the data join interacts with the simulation nodes() and links() call. 来源： https://stackoverflow.com/questions/38623530/d3-v4-update-force-layout

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

由 孤街醉人 提交于 2019-12-18 10:44:17
问题 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

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

由 好久不见. 提交于 2019-12-18 08:25:53
问题 <!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)

d3.js static force layout

由 北战南征 提交于 2019-12-18 07:15:11
问题 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. 回答1: 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":

Curved line on d3 force directed tree

由 微笑、不失礼 提交于 2019-12-18 02:40:35
问题 New to d3 and trying to develop a force directed tree into which we can plug varioss dataset. I've managed to get the basic idea up and running but would like to make the links curved so I can deal with multiple links. I've looked at http://bl.ocks.org/1153292 and I'm just not getting it. The nearest I get is it all working with no path visible. This is my code for straight lines, I'd appreciate some help if you've got the time Thanks: //Sets up the svg that holds the data structure and puts

Adding label to the links in D3 force directed graph

由 点点圈 提交于 2019-12-17 20:34:32
问题 I have created a force directed graph but I'm unable to add text to the links created. How can I do so? Following is my code link I have used the following line to append the titles on the link's, but its not coming. link.append("title") .text(function (d) { return d.value; }); What am I doing wrong with this ? 回答1: This link contains the solution that you need. The key point here is that "title" adds tooltip. For label, you must provide slightly more complex (but not overly complicated) code

Add text label to d3 node in Force layout

由 坚强是说给别人听的谎言 提交于 2019-12-17 07:41:25
问题 This is my code look like, you can also have full code on JsFiddle . I want to have labels on every node, but I can't. By the way, labels can be embedded in the circle in the console. var nodes = svg.selectAll("circle") .data(dataset.nodes) .enter() .append("circle") .attr("r", 10) .style("fill", function(d, i){ return colors(i); }) .call(force.drag); var label = nodes.append("svg:text") .text(function (d) { return d.name; }) .style("text-anchor", "middle") .style("fill", "#555") .style("font
订阅 force-layout