d3.js - D3 collapsible tree, change colour of knots and avoid line/text overlap -


so here d3 tree:

http://plnkr.co/edit/hwczecztlor51cynsgsl?p=preview

as may see, tree bit complex , of leave names may quite long. main questions are:

can change colour of specific knots (some blue, red) , there way can make text of leave not overlap link previous level? happens when link straight line.

my js skills lacking least these baby steps world , appreciated.

thanks!

the answer first question easy. colour of node set in line 90 in example --

.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

to change colour, need adapt line. in function returns colour, have access data bind nodes, can use of data attributes decide colour. note fill colour set here , not outline stroke colour, add .style("stroke", ...).

the answer second question more complex. functionality you're asking not built in d3, have yourself. note quite complex thing because have figure out positions , bounding boxes of links , text elements dynamically. doing in general fashion major project.

i suggest experiment label placements avoid overlap as possible. easier.


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -