D3 Pack Text seltsames Verhalten

Question

Ich habe seltsame Verhaltensweisen von D3 Pack Layout. Wie in den beiden folgenden Bildern zu sehen ist, wird der Text manchmal nicht richtig platziert. Im guten Bild ist eine Anwendung, die ich bereits entwickelt habe. In dem Bild mit dem Fehler ist die gleiche Anwendung, die ich versuche, in einen bootstrap modalen Dialog zu setzen. Ich benutze den gleichen Code und es sollte funktionieren, aber aus irgendeinem Grund ist es nicht. Ich schaue immer noch nach, aber ich frage mich, ob jemand eine Ahnung davon hat, was vor sich geht.

var node = svg.select("g") 
     .selectAll("g") 
     .data(root.descendants()) 
     .enter().append("g") 
     .style("opacity", function(d){return 1/(Math.max(1,d.height))}) 
     .attr("r", function(d){return d.r}) 
      .attr("transform", function(d) { 
      return "translate(" + d.x + "," +d.y+ ")"; }) 
      .attr("class", function(d) { return "node" + (!d.children ? " node--leaf" : d.depth ? "" : " node--root"); }) 
      .each(function(d) { d.node = this; }) 
      .attr("value", function(d){return d.value}) 
      .on("mouseover", hoveredPack(true)) 
      .on("mouseout", hoveredPack(false)) 
      .on("dblclick", function(d){transform = zoomByDoubleClick(d, width, transform, root, node)}) 


var leaf = node.filter(function(d) { return !d.children; }); 

var colors = generateColors(leaf, data); 

var circle = node.append("circle") 
    .attr("r", function(d) { return d.r}) 
    //.attr("padding", function(d){return 20}) 

    .style("fill", function(d){ 
     return colors[d.id]; 
    }); 

var arc = d3.arc() 
    .innerRadius(function(d,i){return d.r;}) 
    .outerRadius(function(d,i){return d.r;}) 
    .startAngle(Math.PI) 
    .endAngle(3*Math.PI); 

node.append("path") 
    .attr("fill","red") 
    .attr("id", function(d,i){return "s"+i;}) 
    .attr("d",arc); 

node.append("text") 
.text(function(d){ return (d.r>50)? d.id.substring(d.id.lastIndexOf("@") + 1) : "";}) 

    .style("text-anchor","middle") 
    .append("textPath") 
    .attr("xlink:href",function(d,i){return "#s"+i;}) 
    .attr("startOffset",function(d,i){return "25%";}) 
    .style("opacity", function(d){ return 1/Math.log(Math.max(1,d.height))}) 

Answer 1

erkannte ich das Problem verwandt ist irgendwie auf den Dialog modal Bootstrap. Ich habe versucht, das Element in einem leeren div auf einer leeren Seite zu bewältigen und es hat gut funktioniert.

Also ich meine d3 nicht mehr zu einem modalen Dialog hinzufügen. Ich arbeite nur an dem Problem.