Wie kann ich Beschriftungen zu einem Kreisdiagramm hinzufügen, wenn ein Array ohne benannte Einträge

Question

Ich schrieb ein Javascript-Programm, das ein Kreisdiagramm mit d3.js erstellt.

Das funktioniert gut, aber ich kann keine Etiketten zum Diagramm hinzufügen.

Die Daten verwende ich die folgende Struktur aufweist:

[["country", "percentage"], ["country", "percentage"],...] 

oder als Beispiel:

 [["A", "0.5"], ["AUS", "0.3"],....] 

Die grafische Darstellung funktioniert gut, aber ich habe keine Etiketten angezeigt werden soll.

Jede Hilfe wäre willkommen.

hier ist ein Auszug aus dem Code:

var updatePie = function() { 

       var width = 480, 
        height = 480, 
        radius = Math.min(width, height)/2; 



       var labelr = radius + 30; 
       var formatPercent = d3.format(",.2%"); 
       var color = d3.scale.ordinal() 
       .domain(["A", "AUS", "B", 
         "BG", "BR", "CDN", 
         "CH", "CN", "CO", 
         "CZ", "D", "DK", "E", 
         "EST", "ET", "F", 
         "FIN", "GB", "I", 
         "IL", "IRL", "J", 
         "N", "NL", "NZ", 
         "RUS", "S", "UAE", 
         "USA", "ZA"]) 
       .range(["#bac5ca", "#7b95a7", "#526f8b", 
         "#454c57", "#323540", "#a17d48", 
         "#5e747d", "#405666", "#2a2e34", 
         "#1f2127", "#5c482b", "#c7d0d4", 
         "#94a9b8", "#6f8aa3", "#616c7c", 
         "#505669", "#b49569", "#8a9ca3", 
         "#57768b", "#41576d", "#363c45", 
         "#292b33", "#7e623a", "#d5dbdf", 
         "#adbdca", "#90a6ba", "#848e9c", 
         "#747b90", "#454c57", "#c6af8c", 
         ]), svg; 
       function graph(_selection) { 
        _selection.each(function(_data) { 

         var pie = d3.layout.pie() 
         .value(function(d) { return d[1]; }) 
         .sort(null); 

         var arc = d3.svg.arc() 
         .innerRadius(radius - 100) 
         .outerRadius(radius - 50); 

         if (!svg){ 
          svg = d3.select(this).append("svg") 
           .attr("width", width) 
           .attr("height", height) 
           .append("g") 
           .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
         } 
         var path = svg.selectAll("path").data(pie(_data)); 

         path.enter().append("path") 
          .attr("fill", function(d, i) { return color(i); }) 
          .attr("d", arc) 
          .each(function(d) {this._current = d;}); 


         var text = svg.selectAll("text") 
              .data(pie(_data)); 

         text.append('text') 
          .attr("fill", "black") 
          .attr("font-family", "sans-serif") 
          .attr("transform", function(d) { 
          var c = arc.centroid(d), 
           x = c[0], 
           y = c[1], 
           h = Math.sqrt(x*x + y*y); 
          return "translate(" + (x/h * labelr) + ',' + 
           (y/h * labelr) + ")"; 
         }) 
          .attr("text-anchor", function(d) { 
          // are we past the center? 
          return (d.endAngle + d.startAngle)/2 > Math.PI ? 
           "end" : "start"; 
         }) 
          .text(function (d) { 
          return d[0]+ " " + formatPercent(d[1]); 
          }); 



       path.transition() 
        .attrTween("d", arcTween) 
        .duration(750); 

       path.exit().remove() 



       function arcTween(a) { 
        var i = d3.interpolate(this._current, a); 
        this._current = i(0); 
        return function(t) { 
         return arc(i(t)); 
        }; 
       } 

      }); 

      } 
      return graph; 
      } 

      var updateFunction = updatePie(); 
      var container = d3.select("#chartDiv"); 

      function update(data) { 
       container.datum(data).call(updateFunction); 
      } 

      var firstDataset = getChannelData("channelName1"); 

      update(firstDataset); 

      document.getElementById("dropdown").addEventListener("click", reDrawChart); 

      function reDrawChart() { 
       var e = document.getElementById("dropdown"); 
       var strUser = e.options[e.selectedIndex].innerHTML; 
       getChannelData("channelName2"); 
       var secondDataset = getChannelData(strUser); 
       update(secondDataset); 
      } 

Answer 1

Da es keine Geige ist vorgesehen, ich habe den Code nicht ausgeführt, aber es wäre wahrscheinlich hilfreich seine Auswahl zu verwenden zu betreten und verlassen, wenn das Hinzufügen der Etiketten (Dies verhindert auch doppelte Etiketten auf Updates).

So ändern Sie so das Bit, wo Sie die Beschriftungen hinzufügen:

text 
    .enter() 
    .append('text') 
    //the rest of your test attributes 

text 
    .exit() 
    .remove(); 

, dass jetzt nicht sofort Ihr Problem lösen, aber die nächste Schritt wäre die Auswahl eingeben werden protokolliert. Wenn die Eingabe-Auswahl leer ist, haben Sie wahrscheinlich ein Problem mit den Daten, die Sie an den Text binden (Problem mit dem, was pie(_data) zurückgibt).

Wenn die Eingabeauswahl korrekt ausgeführt wird und die Beschriftungen enthält, die Sie dem DOM hinzufügen möchten, muss dies der Art entsprechen, in der Sie die Beschriftungen hinzufügen. Das sieht gut aus, aber ich nehme an, dass es ein Problem mit den Daten ist, die Sie binden.

Wenn Sie ein Konsolenprotokoll von pie(_data) hinzufügen könnten und die Beschriftung eingeben, bin ich gerne weiter zu helfen. (Oder bieten Sie eine Geige mit Ihrem Problem).

Hoffe, das hilft.