Блог

Цель визуализации: построить дерево D3, в котором есть текст как в узлах, так и в ссылках, и который переходит чисто, когда узлы выбраны / отменены.

Проблема: хотя я могу заставить текст ссылки, называемый «предикатами», отображаться вдоль центроида всех путей ссылок, я, похоже, не могу заставить их переходить «плавно».

Вопрос: Может кто-нибудь, пожалуйста, помогите мне, пожалуйста, помогите мне очистить код и лучше понять, как ведут себя переходы по дереву «ссылки», чтобы я понял теорию, лежащую в основе кода?

Визуализация и расположение источника: http: //bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85/

Существующий код выглядит следующим образом…

 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 to 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 to their 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 to the new position of the 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); }
    }
 

Некоторые симптомы…

• Когда текст ссылки переходит внутрь или наружу, он прерывистый / не плавный
• Когда ветвь сворачивается, текст ссылки не переходит в соответствующие центроиды пути

Мое разочарование в том, что я чувствую, что я очень близок, но мне не хватает чего-то очень простого / базового. Любая помощь будет очень признательна.