D3包装文字奇怪行为

我遇到来自D3包装布局的奇怪行为。正如下面的两张图片所看到的，有时候文本没有正确放置。在好的情况下，我已经开发了一个应用程序。在与错误的图片是我试图把一个引导模式对话框相同的应用程序。我使用相同的代码，它应该工作，但由于某种原因，它不是。我仍在研究它，但想知道是否有人知道发生了什么。D3包装文字奇怪行为

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

来源

2017-06-22 Qasim Ahmed

我意识到这个问题以某种方式与进行引导的模态对话框。我试图在空白页面上的空白div中应对元素，它工作正常。

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

来源

2017-06-26 20:00:09

D3包装文字奇怪行为

回答

相关问题