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
Post a Comment