force-layout

Position circles on a horizontal axis without overlapping using force layout

由 末鹿安然 提交于 2019-12-24 15:53:22
问题 I would like to position circles on a d3 scale and relax them in such a way that they do not overlap. I know that this decreases accuracy, but that's okay for the type of chart that I would like to generate. This is my minimum (non-)working example: https://jsfiddle.net/wmxh0gpb/1/ <body> <div id="content"> <svg width="700" height="200"> <g transform="translate(50, 100)"></g> </svg> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> <script> var width =

Force simulation of texts on bubble-chart does not work

由 蹲街弑〆低调 提交于 2019-12-24 15:52:21
问题 I have a script in which I make circles and then append text to them. I want to use force simulation so that texts of different circles don't overlap. The issue that I am currently facing is shown in graph below: (2 red circles on the left have overlapping text) I used force simuation in my script for texts but nothing happens. I am not getting any error but still the texts are overlapping. I have tried many solution but nothing seems to work. Following is my script: function graph(data){ /

Graying out an image in D3js

由 我的未来我决定 提交于 2019-12-24 14:40:17
问题 I'm using images as nodes in a D3js force directed graph. On a particular event, I want to gray-out this image. Is there a way to to achieve this? I tried reducing opacity but it doesn't give the desired effect. 回答1: Did you actually want to make it grayscale? Borrowing from here. // set up filter svg.append('filter') .attr('id','desaturate') .append('feColorMatrix') .attr('type','matrix') .attr('values',"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0");

Remove all .fixed classes from force layout nodes with jQuery

由 我的梦境 提交于 2019-12-24 12:29:20
问题 I have this structure , made by the d3.js force layout: <div id="familytreecontentsvg"> <g class="nodes"> <g class="node" transform="translate(625.2095978696435,404.7159479251927)" style="border: 3px solid red;"></g> <g class="node" transform="translate(549.3595414086468,461.0475336079573)" style="border: 3px solid red;"></g> <g class="node fixed" transform="translate(617.2898371986196,498.8572888164544)" style="border: 3px solid red;"></g> </g> And finally I would like to remove the .fixed

How to link extra attributes from json data in a D3.js force layout?

由 对着背影说爱祢 提交于 2019-12-24 08:38:43
问题 I have followed the various examples from Mike Bostock to create a collapsible force layout with directed paths and images at the nodes (related to this other question). Now, I want to link some extra information to some of the nodes if they contain any extra information, as structured by the data in a json string. The json string that looks like this: { "name": "Somename", "text": "Some text", "extradata": [ { "type": "sometype", "icon": "someicon.png" }, { "type": "sometype02", "icon":

How to arrange several hundred nodes in symmetrical concentric circles based on selection criteria in D3 forced layout?

由 亡梦爱人 提交于 2019-12-24 04:18:12
问题 I'm pretty new to D3 and working with a force direction layout which currently has about a 1000 nodes. The visualization as of now looks as shown below: In the above network, the red node in the center of the page is the root node, solid yellow nodes are level 1 nodes and yellow nodes with pie-slices in them are level 2 nodes. I have a property attached to each node, 'category' where category = 1: root node category = 2: level 1 node category = 3: level 2 node I'm unable to manipulate the

D3 JS - Force Graph - Doesn't restart layout after removing Node

由 非 Y 不嫁゛ 提交于 2019-12-24 02:07:14
问题 UPDATE : The graph now behaves correctly after removal of node(s). However, when I conditionally remove non-sequential nodes (e.g. 4,5,10) the graph does not display the correct nodes. Please look at the updated click handler below (lots of debugging). I'm trying to remove all nodes with the "d.source" value == "news24", which are all the large blue circles. Although the array is correct after "removal", the incorrect nodes are being displayed. I suspect its something to do with node.exit(),

text not showing in forcelayout d3js but present in view

由 守給你的承諾、 提交于 2019-12-24 01:55:24
问题 text is visible in source when viewed from web inspector but is not visible on real graph <html> <head> <title>D3</title> <script src="d3.min.js"> </script> </head> <body> <script type="text/javascript"> //Width and height var w = 500; var h = 300; //Original data var dataset = { nodes: [ { name: "Adam" }, { name: "Bob" }, { name: "Carrie" }, { name: "Donovan" }, { name: "Edward" }, { name: "Felicity" }, { name: "George" }, { name: "Hannah" }, { name: "Iris" }, { name: "Jerry" } ], edges: [ {

d3.js Force layout only applied vertically

由 泄露秘密 提交于 2019-12-24 00:03:08
问题 I'm doing a data visualisation with d3. To give you some context, the graph contains about 400 nodes (all data is loaded from multiple json files) that are connected to each other they are all mapped by year in a timeline (x axis) the position in the y axis is completely randomized the nodes have all different sizes Now my question: How can I distribute the nodes in the y axis so that they don't overlap? You can checkout the full sourcecode on the GitHub Repository (work in progress -

How to increase the length of a link in D3 force layout

由 烈酒焚心 提交于 2019-12-23 18:29:57
问题 How can I increase the link length of a force graph. My code is written below. What should i change? Also I want to label the "only child nodes" on mouse-over and the parent node has their label. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Force</title> <style type="text/css"> circle.node { cursor: pointer; stroke: #3182bd; stroke-width: 1.5px; } line.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; } </style> </head> <body>
订阅 force-layout