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包裝文字奇怪行爲

回答

相關問題