Comments (8)
Thanks @vasturiano ,
Yes i figured that out when i accidentally reversed the list :)
from force-graph.
Sorry @vasturiano for pushing this. Did you get a chance to check this ?
from force-graph.
Hi @Masrico, if the intention is to better adjust the proportions of the link lengths to the node sizes, I would suggest using .nodeRelSize(<num>)
(or in your nodeCanvasObject
function if you're using that) to get the right balance, and then set the 'zoom' level to what is the most appropriate. You can set this by calling (after initializing the graph).zoom(<num>)
.
This should yield a good visual balance.
If, on the other hand, you actually need to modify the internal behavior of the forces that control the graph, you can do that using .d3Force()
. For example, to change the target distance of links:
graph.d3Force('link').distance(link => <num>)
Or even add an additional force that restricts the nodes to a particular bounding box, like:
graph.d3Force('contain', function() { <your code> })
from force-graph.
Thanks for the suggestions @vasturiano and very quick responses.
I have tried using nodeRelSize by increasing and decreasing the number but it is not effecting much on the nodes plot. Dont know how to access links in nodeCanvasObject, yes am using this for text representation, an example would be great.
graph.d3Force('link').distance(link => ) have changed the number (increased and decreased), when i do this am loosing all my changed done in nodeCanvasObject and it plots the default graph.
I tried using graph.d3Force('contain', function(box) { }); where the box gives me 0.7 and not really sure how to manipulate this.
My graph config is as below.
Graph.graphData(dataWithNodesAndEdges)
.nodeId('name')
.nodeVal('value')
//.linkDirectionalParticles(1)
//.nodeRelSize(2)
.d3Force('contain', function(box) {
})
.nodeLabel(node => unescape(node.name))
.nodeAutoColorBy('group')
.linkAutoColorBy('group')
.d3AlphaDecay(0.3)
.d3VelocityDecay(0.01)
.linkSource('source')
.linkTarget('target')
// .zoom(Zoom)
.onNodeClick(GetGroupedNodes)
.cooldownTime(100000)
.linkWidth(0.2)
.nodeCanvasObject((node, ctx, globalScale) => {
if (unescape(node.name) == unescape(node.group)) {
const label = unescape(node.name);
const fontSize = 12 / globalScale;
ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width;
const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// ctx.fillStyle = node.color;
ctx.fillStyle = "#000";
ctx.fillText(label, node.x, node.y);
}
else
{
ctx.beginPath();
ctx.fillStyle = node.color;
ctx.arc(node.x, node.y, circleScale(node.value), 0, 2 * Math.PI);
ctx.fill();
}
});
Also, wish the graph cools by itself without a cooldowntime but when i remove it, its becoming static quickly without proper node arrangements.
Can you please give any suggestions on this config, if any examples to browse through ?
from force-graph.
Hi @Masrico, here's some answers to your questions:
nodeRelSize
does not work for your case because you're usingnodeCanvasObject
. You should adjust the custom nodes sizes in that method, possibly by adjusting the textfontSize
.nodeCanvasObject
only applies to nodes, not links. Links will always be represented as lines that go from one node position to another. You can style them using the link styling methods listed in the docs, but not actually change their geometry.- When calling
.d3Force('...')
, you should do this after the graph has been initialized and not chain any graph methods after it. Because the returning object of that method is a d3-force specific reference and not the graph itself. - Regarding the 'contain' force, there is an example here / source that declares a bounding box force. You can try following the same syntax and adjust it to your use case.
- If you wish for the graph to jump immediately to its final state without animating the build-in, you can set the
cooldownTicks
to 0 (orcooldownTime
as you mentioned) andwarmupTicks
to a value large enough that allows the graph to build to a proper state. Generally a value of200
or so is sufficient. The higher the value, the longer the initial rendering of the graph will take while its running all the engine iterations in the background.
from force-graph.
thanks for all your suggestions and inputs. Will try various options given and check where the graph stands.
For nodes to come close, is there any alternative or suggestion for links, as they are having larger length's or change the geometry of links.
from force-graph.
@vasturiano
Also, is their a way where text node is over the circle nodes.
.nodeCanvasObject((node, ctx, globalScale) => {
if (unescape(node.name) == unescape(node.group)) {
const label = unescape(node.name);
const fontSize = 12 / globalScale;
ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width;
const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// ctx.fillStyle = node.color;
ctx.fillStyle = "#000";
ctx.fillText(label, node.x, node.y);
}
else
{
ctx.beginPath();
ctx.fillStyle = node.color;
ctx.arc(node.x, node.y, circleScale(node.value), 0, 2 * Math.PI);
ctx.fill();
}
}
In the screen shot above you can see that the text node is overlapped by the circle nodes and limits the visibility of text. May be i create the circle arcs first and then created text nodes, but not sure how can that be achieved with the force geometry ?
from force-graph.
@Masrico the nodes are drawn in the order present in the supplied nodes
array.
That means that if you wish to have some nodes in "front" of other nodes, just sort your nodes array to follow that logic. For example, have your text-based nodes at the end of the array so they are drawn last.
from force-graph.
Related Issues (20)
- Formatting Node labels (not the hovering label) Force-graph 2D; ReactJS HOT 2
- Units tests
- Adding a higlight on children nodes effect ( inifinite loop bug in forceGraph )
- When set fixed position for nodes after dragging, at some point nodes start floating very far from the fixed nodes (Image + Video)) HOT 1
- Question about handling onNodeClick function HOT 1
- Bad performance on Android
- Conditional node styling based on data values/accessor method (i.e. circles for person, squares for place) HOT 2
- mousedown event not working after adding it HOT 2
- Link offsets? HOT 1
- How to conditionally change linkLineDash between nodes HOT 1
- Curved arrows HOT 2
- How to draw nodes around a circle HOT 2
- How to avoid collisions of nodes. HOT 1
- Problems with labels, and dragging when openin from Brave browser with shield on. HOT 1
- Conditional in linkDirectionalParticles does not use correct return value HOT 1
- Option to always show node labels HOT 2
- How to implement incremental graphData update on zoom and pan? HOT 4
- [Bug]: When nodes are rapidly dragged multiple times in succession, it will be recognized as dragging the canvas
- Discrepency between .json files used in demo and syntax on README HOT 2
- Detecting right click when mouse is moving
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from force-graph.