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
Related
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.
I'm building a 'cluster visualization' leveraging pack layout recently to help explore some of our data. Please see the screenshot. (Looks like I can not attach a image, so I posted a dropbox link)
https://www.dropbox.com/s/pfcq6ytetv19bng/Screenshot%202015-05-27%2013.42.14.png?dl=0
This is how I did it: first, I rendered the clusters' circles using one pack layout(the light blue ones), and then I grabbed the positions of all the clusters and created all the G elements. Finally, within each G element, I rendered the children elements using a different pack layout(the colorful circles).
The reason I did it this way is: I want to separate clusters far away from each other and keep children elements of one cluster close to each other.
But, it seems the sizes of children circles in different clusters are not consistent. (all the red circles should actually have the same size, cause their values are the same). Right now, I simply sum up all the children' values to get the clusters' values.
My question is, how can I get the sizes of circles within different clusters correctly? Thank you in advance :)
Best,
I would recommend using the layout to calculate all the circles sizes, so they're all the size. Then you can offset all of the children of the root's children to be relative to the root's children. For each root child, you can then add a <g> and scale it however you like. Here's a live demo of what I mean: http://bl.ocks.org/vicapow/3d24f96c240eeb8d14e3
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 have a "complex" problem where I have a bunch of tooltips (orange) on top of elements (black) that can be randomly placed on screen. The tooltips are a big square with a triangle in the middle of one of it's 4 sides pointing though the element direction. By default, the triangle will be in the middle of the element, but can be moved as long as it stay close to it, so we can't easily understand it refer to this element and not another one.
The problem is, the tooltip must NOT overlap each other, and can't be out of screen.
Image of my tooltip problem
I thought about first placing every tooltips to their default position (triangle pointing down), and then check if they are out of screen or overlap another one, and if so, try another position. But using this technique (which is probably the simplest one), I do not guarantee the best placement since once a tooltip has been placed, I will not replace him if another one can't fit anywhere otherwise it become too complex.
Does someone have any tips/idea how to deal with this type of problem?
Thanks!!
This looks like an instance of the map labelling problem. Wikipedia has an article about it.
You could place all the tooltips using some sort of physical simulation of repulsive electrical charges, similar to what is done in some algorithms for drawing graphs. You could model each tooltip as an object attached with a soft spring to its black box, while simulating a strong repulsive force between all the tooltips and between a tooltip and the edge of the image. You calculate all the forces and move the tooltips iteratively, until all positions converge. You could play with making the force scale as inverse square, inverse cube, etc to find nice results.
This might be a bit of work to implement, but should probably give decent results for simple cases. It is probably impossible to guarantee that a good solution always exists, since if you add too many tooltips, your image will be full.
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?