mise à jour de la position du texte sur la mise à jour du diagramme à secteurs

Question

J'ai essayé d'adapter ce design dans un graphique circulaire dynamique.

Tout s'est bien passé en dehors de l'obtention du texte à repositionner lors de la mise à jour. Dans l'exemple ci-dessous, je supprime d'abord l'étiquette de texte, puis je redessine, je ne pense pas que ce soit la meilleure façon de le faire, j'essayais de l'approcher avec le code qui est commenté juste en dessous mais ont échoué.

Plunk

code en question;

function updatePath() { 

    g = svg.datum(donutData).selectAll(".arc") 
     .data(pie) 
    g.select("path") 
     .transition() 
     .duration(750) 
     .attrTween("d", arcTween) // redraw the arcs 

    svg.selectAll(".donutText").remove() 

    pieTextLabel() 

} 

// Attempt 1 Below 

    /* 

     svg.selectAll(".donutText") 
     .style("opacity", 0) 
      .attr("dy", 18) 
      .append("textPath") 
      .attr("startOffset", "50%") 
      .style("text-anchor", "middle") 
      .attr("xlink:href", function(d, i) { 
      return "#donutArc" + i; 
      }) 
      .text(function(d) { 
      return d.value; 
      }) 
      .transition() 
      .duration(1000) 
      .style("opacity", 1); 

     */ 


    function pieTextLabel() { 
    var selectText = svg.selectAll(".donutText") 
     .data(donutData) 

    selectText 
     .enter().append("text") 
     .attr("class", "donutText") 
     .attr("dy", 18) 
     .append("textPath") 
     .attr("startOffset", "50%") 
     .style("text-anchor", "middle") 
     .attr("xlink:href", function(d, i) { 
     return "#donutArc" + i; 
     }) 
     .text(function(d) { 
     return d.value; 
     }); 

    selectText.exit().remove() 

    } 

    function drawPie() { 
    var g = svg.selectAll(".donutArcSlices") 
     .data(pie(donutData)) 
     .enter().append("g") 
     .attr("class", "arc"); 

    var path = g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
     return color(d.data.label); 
     }) 
     .each(function(d, i) { 
     this._current = d; 

     var firstArcSection = /(^.+?)L/; 
     var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1]; 
     newArc = newArc.replace(/,/g, " "); 

     svg.append("path") 
      .attr("class", "hiddenDonutArcs") 
      .attr("id", "donutArc" + i) 
      .attr("d", newArc) 
      .style("fill", "none"); 
     }) 

    } 

Si vous rencontrez des difficultés à trouver une solution, nous vous saurions gré de nous aider.

Merci

Answer 1

C'est parce que vous ne l'avez pas mis à jour le path

d'abord supprimer l'ancien path

svg.selectAll("path").remove() 

puis recréez

var path = g.append("path") 
    .attr("d", arc) 
    .style("fill", function(d) { 
    return color(d.data.label); 
    }) 
    .each(function(d, i) { 
    this._current = d; 

    var firstArcSection = /(^.+?)L/; 
    var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1]; 
    newArc = newArc.replace(/,/g, " "); 

    svg.append("path") 
     .attr("class", "hiddenDonutArcs") 
     .attr("id", "donutArc" + i) 
     .attr("d", newArc) 
     .style("fill", "none"); 
    }) 

voir http://plnkr.co/edit/WTuX38GCgIFLFfc1QPVv?p=preview