D3包文本奇怪的行为

Question

我遇到了来自D3＆＃39包装布局的怪异行为。如下图所示，有时文本放置不正确。好的图片是我已经开发的应用程序。在带有bug的图片中，我试图将其放入bootstrap模式对话框中。我使用相同的代码，它应该工作，但由于某种原因它不是。我仍然在调查它，但想知道是否有人知道发生了什么。

    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

我意识到这个问题与Bootstrap的模态对话框有某种关系。我尝试在空白页面上处理空白div中的元素，它工作正常。

所以我不再将我的d3添加到模态对话框中。我正在解决这个问题。