javascript - How to get D3 Tree link text to transition smoothly? -
visualization goal: build d3 tree has text at, both, nodes , links, , transitions cleanly, when nodes selected/deselected.
problem: while can link text, called "predicates," show along centroid of link paths, can't seem them transition in , out "smoothly."
question: can please me please me clean code , better understand how tree "link" transitions behaving understand theory behind code?
visualization , source location: http://bl.ocks.org/guerino1/raw/ed80661daf8e5fa89b85/
the existing code looks follows...
var linktextitems = vis.selectall("g.linktext") .data(tree.links(nodes), function(d) { return d.target.id; }) var linktextenter = linktextitems.enter().append("svg:g") .attr("class", "linktext") .attr("transform", function(d) { return "translate(" + (d.target.y + 20) + "," + (getcenterx(d)) + ")"; }); // add predicate text each link path linktextenter.append("svg:foreignobject") .attr("width", "120") .attr("height", "40") .append("xhtml:body") .attr("xmlns", "http://www.w3.org/1999/xhtml") .html(function(d){ return "<p>" + (linksbyidhash[d.source.id + ":" + d.target.id].predicate) + "</p>"; }); // transition nodes new position. //var linktextupdate = linktextitems.transition() //.duration(duration) //.attr("transform", function(d) { return "translate(" + d.source.x + "," + d.source.y + ")"; }) //linktextupdate.select("linktext") //.style("fill-opacity", 1); // transition exiting linktext new position of parents. var linktextexit = linktextitems.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.source.y + 20 + "," + (getcenterx(d)) + ")"; }) .remove(); linktextexit.select("linktext") .style("fill-opacity", 1e-6); function getcenterx(d) { var xs = d.source.x; var xt = d.target.x; if(xs == xt) { return (xs - (xs - xt)/2); } else if(xs > xt) {return (xs - (xs - xt)/2); } else { return (xt - (xt - xs)/2); } } some symptoms...
- when link text transitions in or out, it's choppy / not smooth
- when branch collapse, link text doesn't transition appropriate path centroids
my frustration feel i'm close i'm missing simple/basic. appreciate.
Comments
Post a Comment