Is it possible to catch mouseover event on edge or another node, while dragging node over it? Idea is that when node is gragged over edge - edge/node can be highlited.
Related
I would like to increase the border width of my nodes, but I find that the arrow heads in digraph edges do not respect the added width. Instead, they sink into the border. Here's my simple graph.
strict digraph {
a [penwidth="10.0"];
b [penwidth="10.0"];
a -> b;
}
How could I either increase the node width safely, or distance the edges further back? Reading through the attribute list, I didn't find a way. The closest was peripheries, but it makes multiple narrow peripheries instead of a thick one, but the edges do stick to the outermost periphery.
This is a known bug: https://forum.graphviz.org/t/allign-nodes-stroke-with-end-of-the-arrows-path-width/462
The only work-around I know is to "move" node b or shorten the edge - described in the bug report.
Basically what the question asks.
I have a force layout graph and use dragstart, dragmove and dragend. When I move one node, the force layout stops and only the node I select moves.
I am wondering if anyone can point me in the right way so when I move this node, if it has children, all the children move with it.
Or have any links to examples I may be able to work from ?
Also, I have a way of selecting nodes and they become highlighted and also get added to an array. Is there a way that I can highlight a few of these nodes and move/drag them all at once ?
I have an application that generates a d3 display using the force-directed layout. One of capabilities in the application is to show all paths from vertex A to vertex B. I want to pin the start and end vertices to the left and right edges of the display and I've accomplished this programmatically, but I'm not happy with results as the force directed layout clumps all of the remaining vertices in the middle of the graph div. Changing the gravity and the link strength parameters to the force directed layout simply changes the size of the clump in the middle of the screen.
Any suggestions on how I can distribute the middle vertices more uniformly between the two pinned endpoints?
Thanks in advance.
In d3.js, i find that the tree layout cannot calculate the previous nodes by a certain node, it only can draw the successor nodes. is that some layout like DAG can be draw in d3.js?
Couple of ideas you might find useful:
You can use the tree layout to place the nodes in the canvas, create link objects pointing back and forth, then bind the link objects to a diagonal.
http://www.durablejs.org/examples/flowchart/1/admin.html
You can also use place the nodes using a pack layout, create the link objects pointing back and forth, and bind the links to a Bezier curve.
http://www.durablejs.org/examples/statechart/1/admin.html
You can find the code for the graphs above:
https://github.com/jruizgit/durable/tree/master/lib/durabjevisual.js
I want to visualize a series of hierarchical bullet graphs. Specifically, I want to be able to click on my top level category bullet graphs, and have them expand into the sub-topic breakdowns with a bullet graph for each sub-topic.
So basically, I want to recreate this D3 tree example:
http://mbostock.github.com/d3/talk/20111018/tree.html
But have each node be a bullet graph instead of just a circle:
http://mbostock.github.com/d3/ex/bullet.html
I'm brand new to D3, so even looking at the example source code, I'm not sure where to start.
The key is that the canvas acts like a real two dimensional drawing canvas. You, as the author of the visualization control where you place any object on the canvas. There are two things you need to worry about... 1) Making sure you have all data that you need to realize a visualization at a specific point on the canvas, and 2) Understanding how to draw your visualization in the way you want to render it, where you want to render it on the canvas.
In the case of mixing charts with the nodes of a tree, the nodes act as reference points for placement of the charts. You'll quickly notice that the more nodes you have, the more difficult it will be to render your charts because of canvas clutter. In other words, you will be dynamically be drawing charts over tree elements (nodes and branches). You may want to consider something like rendering the chart related to a node in another area of the canvas that does not contend with the tree visualization (such as the upper left or lower left of the canvas). So, for example, if you hover over a node, the node changes size and/or color and/or shape to show that it is currently "in context" and, simultaneously, you see the corresponding bullet chart (or any other relevant information) in a clear and uncluttered area of the screen (such as in the upper left hand corner of the drawing, away from the branch "sprawl" of the tree, which becomes more and more cluttered, as the tree grows further to the right of the canvas (this assumes a tree that grows from left to right). Doing so ensures that there is no clutter blocking between any one drawing or any other. Keeping the bullet chart that is drawn when you hover over a node in an area of the canvas that does not contend with the tree means you won't have to "redraw" the elements of the tree that get blocked out each time the chart draws itself over specific tree elements, which would be the case if you draw the chart "over tree elements".
Anyhow, I hope this helps.
My Best,
Frank