I made a simple tree structure and displayed it using D3.js. When nodes become too many, it's impossible to see any text.
Fig1 Fig2
I could make an image out of the svg, then render it instead of displaying the tree by d3js and finally using a magnifier to zoom in. I don't know if it can actually work; is there a better and working way to do it?
Well first of all I would recomend placing your lable below the nodes rather than to the right as that will win you some space back but that won't really solve your problem.
I would recomend either making your tree colapse by node
or defining the space between the nodes as a function of how many children there are. For this, you will need to recursively count the children in your tree. You can see how to do that in an answer I gave here
There are likely other solutions but those are the two that jump out at me as the best.
Related
I am using org.eclipse.zest.core.viewers.GraphViewer.setLayoutAlgorithm to set the layout algorithm.
My problem is that when the graph is rendered the nodes are drawn very close to each other and sometime on top of each other.
is there a way to get around this vs writing your own layout algorithm?
This is an old question, but of course you can write new Layout Algorithms for the zest.layout component. As you can see most of them extends from AbstractLayoutAlgorithm.
Also you can change the existing layouts, since it is open source. I dont know which one you were using, but the size of the rows and columns for the most layouts is determined/calculated in the preLayoutAlgorithm Function. So here you can change everything as you like. You may have to test step by step the changes in the visualization.
The number of nodes in my d3 graph is too large. So I built a zoom mechanism in that graph. Now the problem is, I just cannot display text for each nodes since they will overlap each other. However when I zoom in to the nodes, the space is enough to display texts.
So how do I show texts when the space is enough to show all of them without overlapping?
I have had this same problem in the past. Unfortunately optimal label placement is not an easy problem. To mitigate overlap effects one option is to use a restricted force layout for label placement. You can also try using callouts to allow the labels to move farther away from the nodes.
In the past I have implemented a sort of greedy collision detection based algorithm that goes something like:
sort the labels in decreasing priority
for each label in the list // so most important first
if the label does not overlap any placed labels
place the label and add it to my collision data structure (e.g. quad tree)
else
hide the label
Obviously this will have some non-optimal cases and it can be slow if you have a lot of animations going on. But when you have the option to zoom in to see more label and if your absolute number of labels is not too high then it works quite well. There are also a number of obvious ways to speed it up like restricting testing to only labels within the view (but then you need to update on pan).
You may find some helpful suggestions here including an implementation of collision detection.
I already read the api documentation from top to bottom many times already, searching for a solution to make a full dot instead of a half dot when the value is zero. To get the picture right this is my sample. I have been trying many ways to force it to full dot circle, but no luck. Thank you for the help. :D
Using another plugin was no option for me since that will require more time, and time is really really important to me right now cause I am already lacking on it. Well basically my solution was a cheat way or basically a noob way. I actually used two divs, then just combine those two, the first graph only has the bar graph, and the 2nd graph only contains the two line graphs. I basically modified it using css to merge the two graphs, hide some of the unwanted axis, ticks and stuffs from one graph and then I get this result
I created a network in D3.js that updates links (both remove and add) as you move the slider back and forth.
However the edges overlap the nodes (as in edges are drawn ontop of the nodes...)
I think https://github.com/agfk/knowledge-maps/issues/1 looks at the issue but I'm not quite sure what it means.
I might have something to do with the order that the lines are drawn as opposed to the nodes but I don't know how to fix that. Svgs also don't come with z-indexes so I can manipulate it through css.
Any help would be appreciated! Thanks!
This link discusses how to determine the order in which elements are drawn. In your case, perhaps you want to draw the edges first and then the nodes:
https://groups.google.com/forum/?fromgroups=#!topic/d3-js/JCXKef_GRCQ
I'm using PyDot to generate Graphviz/dot graphs in python. I would like to annotate my nodes and edges with images read from files, I've found in the documentation how to put an image as a node, but not how to put an image under a node or even less an edge.
http://www.graphviz.org/doc/info/attrs.html
http://www.graphviz.org/doc/info/shapes.html
http://www.graphviz.org/Documentation/html/shapehowto.html
Does anybody know how to do that?
You can use HTML in the labels for nodes and edges. You can find details here: http://www.graphviz.org/doc/info/shapes.html#html
Basically you can say something
"a" -> "b" [label = <<TABLE><TR><TD><IMG SRC="path/to/picture"/></TD></TR></TABLE>>]
You can add as many rows and columns as you want in the html labels. It's a little more verbose than standard text labels, but you can do a bit more with them.
One method which can work in cases where edges will always be drawn in the same position is to create a PNG with a transparent background and position the icon in the same place that your edge will be drawn, or use the labeldistance/labelangle attributes to move. I'm not familiar with PyDot but using SQL I would create a case to determine whether or not the image is displayed on the node..
Problem with this method is that the graphs which I'm working with are always positioned differently and will never be the same, so in an ideal case I'd like to add the image to the edge label, or under/to the right of the edge label etc. Did you ever manage to find a workaround?