I'm using the radial tree example from d3.js (tree-radial.js) and when you click on a node it should move to the center (set it as the new root). I want to get a smooth transition from one tree structure to another but I can't get it to work at all. The click is recognized but I'm not sure how to transition the nodes. Can somebody explain me the steps to get this work or link a short example where this is done?
I don't know if this helps, but you can have a look at this: http://bl.ocks.org/1249394. The clicked node doesn't move to the center in this example, but in essence you will still need to make some similar transitions, just that you will have to adjust the position of the node to be in the center (slightly different coordinates for the transform).
Related
First off, i've seen questions like this posted several times, but they are all based on SVG, classes and CSS. I'm aiming at solving this using canvas because my final force layout will use 1000+ nodes and svg just doesn't cut it. Also, I have a background in programming but am total n00b to d3. So maybe i'm just missing something obvious.
Here's my current code:
http://bl.ocks.org/gonzam88/3ff2f33975ca8258f4aa9484be4255ce
I guess on mouseover I have to loop all links and check if either source or target matched the current node, but after many attempts i'm not too sure how to achieve this, and how to change specific links properties (when not using SVG).
I feel i'm close but not just there :)
Thanks for reading and hope my english is ok!
UPDATE 1
I've managed to detect links related to hovered node, but when I try to change its stroke it changes every stroke in my graph.
check:
http://blockbuilder.org/gonzam88/9d48b4346fadb6b719a9ce9efb98a899
In this example I only want each group to change to blue line. But both 'groups' are being changed.
Links are drawn on line 140 and my color function is on line 57. How do set stroke color to specific links?
I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.
We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.
I'd like to move a circle along a path using d3.js. I used the code from Mike Bostocks' website here:
http://bl.ocks.org/KoGor/8162640
I'd like to move my circle at a constant speed along the path and have it moving immediately after it has been added to my svg. I cannot see how to twist the code here to make it work.
Does anybody have an idea how to do this?
Best
You should just add a line
.ease("linear")
after .duration(7500), and you should be all set.
This is documentation on ease(), but you should read all that is related to transitions, while you ate at it...
Here is also a test example for various possibilities related to ease():
Good morning,
just starting with the awesome d3js library ...
I want to show only a portion of a graph with the force directed layout. The idea is to have one node declared as the "center" and show all nodes within a distance of two (for example) from this center node, the neighbors of the center node and the neighbors of the neighbors. If the user clicks on one of the displayed nodes it becomes the "new" center node and a different "subgraph" is displayed. I wonder if there is an example around implementing this kind of subgraph layout and if some kind of a "node-distance" algorithm is already implemented in d3js.
Thanks a lot
martin
UPDATE:
Just found the example Modifying a Force Layout which illuminates how to add and remove nodes and edges from a force directed layout.
I just uploaded a "proof of concept level" of an interactive force directed subgraph.
http://justdharma.com/d3/sub-graph/
In this example I use backbonejs under the hood. Being the first time I implement something with backbonejs, I for sure use it in a very crude manner. While this example might illuminate one way how an interactive sub-graph can be achieved it is for sure not a template how to do it - as said just a proof of concept hack ...
This isn't implemented in D3, and I'm not aware of any examples. What you would have to do is the following:
Set the fixed attribute of the new center node to true to prevent the force layout from changing its position.
Set the px and py attributes of that same node to the center position.
For each node in your force layout, compute the shortest path to the new center node.
Depending on the length of the path in each case, either remove the node or keep it.
The trickiest part here is the computation of the path from each node to the new center, but even this is a pretty standard algorithmic problem. Another thing to keep in mind is that you need to modify the data structures that contain the nodes and links of the force layout in place, i.e. you can't set new nodes and links for the force layout and expect everything to work smoothly.