javascript - stop d3 circle pack labels from overlapping -
stuck on overlapping labels. illustrate: jsfiddle
- click on text label "group a". after zoom transition, group label remains causing overlap small circle's label.
- click elsewhere zoom out.
- click on "group a" again. time label not remain, there no overlapping. seems fix after 1 time.
i want no overlapping first time clicked. how do this? don't want truncate labels or reposition labels.
i've been fiddling bit, no luck far.
transition.selectall("text") .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
fyi, occurs if first click on medium circle.
this post gets close, saying possible restricting visibility using pack output, doesn't how achieve it.
so i'm trying this: "if zoomed level of medium or small circle, don't show medium circle label."
thanks.
i having same problem. have figured out particular piece of zoom function, if applied on root after generating intial view, fixes issue. adding code end of d3.json file should trick. still investigating better solution.
init(root) function init(d) { var transition = d3.transition() transition.selectall("text") .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }); }
Comments
Post a Comment