So here I am with this d3 tree:
http://plnkr.co/edit/HwcZecZtLor51cyNSGSL?p=preview
As you may see, the tree is a bit complex and some of the leave names may be quite long. My main questions are:
Can we change the colour of specific knots (some blue, some red)
and is there any way I can make it so that the text of a leave does not overlap with the link with the previous level? This happens especially when the link is a straight line.
My JS skills are lacking to say the least as these are my baby steps into this world and any help would be greatly appreciated.
Thanks!
The answer to your first question is easy. The colour of a node is set in line 90 in your example --
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
To change the colour, all you need to do is adapt this line. In the function that returns the colour, you have access to the data that you bind to the nodes, so you can use any of the data attributes to decide the colour. Note that only the fill colour is set here and not the outline stroke colour, but you could easily add .style("stroke", ...).
The answer to your second question is much more complex. The functionality you're asking for is not built in to D3, so you would have to do that yourself. Note that this would be quite a complex thing to do because you would have to figure out the positions and bounding boxes of the links and text elements dynamically. Doing this in a general fashion would be a major project.
I suggest that you experiment with the label placements to avoid overlap as much as possible. This will be much easier.
Related
How would I create such a view in D3.js -- a central node with self-positioning outer bubbles, all containing text? I'm browsing their gallery but haven't found anything specifically like this. I understand it's good StackOverflow practice to show what one already tried, but I just don't know with which model I'm supposed to start; I played around with a Force Directed Tree with really big radii but it doesn't seem super appropriate.
PS: Icing on the cake would be to have the following connection descriptors as well, but I can also do without. Thanks!
I agree with the suggestion to extend the force-directed graph demo. Here's a quick and dirty fork of that example: https://observablehq.com/#yousefamar/connected-text-bubbles
The text in each bubble is a foreignObject for flexibility, since I found it easier to put a p in the bubbles than svg text. This way you can also use overflow scrolling if there's too much text. pointer-events: none is so that the text can't be selected, and so that you can therefore drag the bubble through the text.
There is probably a lot you can improve there too, e.g. in order to create a gap in the lines, I put a white rect behind the text, but it's an arbitrary width. I remember however that there is some getComputedTextLength function to get the exact width of the label text, which is probably better.
I've been trying to implement a d3 bubble force layout (someone else's existing example here: http://jsfiddle.net/andycooper/PcjUR/1/) but with one added requirement...
I want the bubbles to collect around a centre node which will 1) be the largest node, and 2) shouldn't move. In order to achieve that, I'm hoping to simply create a new svg circle (i.e. avoid adding to the data set in the variable "nodes") that I can then somehow reference in the following method to prevent collisions with it....
function collide(alpha) {
...
}
Sorry for such an open-ended question, but does anyone know if this is possible? (or hopefully has been attempted somewhere before?) So far the only d3 bubble force layouts I've seen have shown ALL nodes with movement bound by force.
Really appreciate any advice!
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
At the risk of asking a silly question, why is each boxplot in d3.box (code and demo) placed in its own svg element? (more generally, placed in its own container element.) Or to put the question another way, why does d3.box only render one component of a chart, rather than all components of a chart? (given that each boxplot is likely to share a common y axis.)
Thanks in advance for any suggestions. I'm sure there's a sensible rationale for this; it's just not clear to me!
Technically, there is no reason to put everything into its own SVG. I don't know why it was done like this in the example, but usually you would have everything in a single SVG and group elements using svg:g elements.
The reason that most d3 components usually only do one thing is that is makes it easier to combine them. If, for example, d3.box rendered x and y axes (or just one of them), you would have to provide options for people who wanted no axes, or a different axis layout, or anything else that isn't covered by how the implementer designed it.
If you're looking for something more high-level that takes care of everything, check out nvd3.js.
What is the best way to prevent overlapping text on coreplot? Especially when some of the slices may be quite small? The overlapping text appears at the bottom, I think that it runs out of space to put it anywhere and thus must pile one label on top of the other.
I could reduce the size of the pie chart, but is there a more elegant way of achieving this?
Mark
Core Plot doesn't do anything about overlapping labels right now. You have to use your knowledge of the data and remove some of the labels that might be too close together.