Javascript D3包文本异常行为

我在D3的包布局中遇到了奇怪的行为。如下面两张图片所示，文本有时放置不正确。在这张好照片中，我已经开发了一个应用程序。在这张有bug的图片中，我正试图将同一个应用程序放入一个引导模式对话框中。我使用相同的代码，它应该可以工作，但由于某些原因，它不是。我仍在调查此事，但想知道是否有人对正在发生的事情有线索

    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))})

---

我意识到这个问题与引导程序的模态对话框有关。我试着在空白页上的空白div中处理该元素，效果很好

因此，我不再将d3添加到模态对话框中。我只是在解决这个问题