d3.js - Autoscroll für Kreisdiagramm Legende

Question

Pie chart with long legend

ich ein d3.js Kreisdiagramm haben, die diesen Code verwendet:

 var legend = svg.selectAll('.legend') 
     .data(color.domain()) 
     .enter() 
     .append('g') 
     .attr('class', 'legend') 
     .attr('transform', function(d, i) { 
      var height = legendRectSize + legendSpacing; 
      var offset = height * color.domain().length/2; 
      var horz = (-2 * legendRectSize) - 27; 
      var vert = i * height - offset; 
      return 'translate(' + horz + ',' + vert + ')'; 
     }) 
     .on("click", function(d,i){ 
      console.log(d); 
      console.log(i); 
     }); 

     legend.append('rect') 
     .attr('width', legendRectSize) 
     .attr('height', legendRectSize)         
     .style('fill', color) 
     .style('stroke', color); 

     legend.append('text') 
     .attr('x', legendRectSize + legendSpacing) 
     .attr('y', legendRectSize - legendSpacing) 
     .text(function(d) { return d; }); 

Das Ergebnis viele Elemente enthält, sieht die Tortendiagramme OK , aber die Legende ist zu lang. Ich möchte nun die Legendenelemente in der Mitte des Tortendiagramms autoscroll machen, so dass die Legende nicht mit dem Tortendiagramm selbst überlagert wird.

Wie kann das gemacht werden?

Als Alternative, wie können Sie die Legende auf nur 10 Elemente beschränken? (ohne die Tortendiagramm-Ergebnisse auf 10 Elemente zu beschränken)

Answer 1

Um einen scrollbaren Container zu erstellen, müssen Sie ein separates svg für die Legenden selbst erstellen und innerhalb eines divs enthalten und das div an die von Ihnen benötigten Koordinaten positionieren. (Natürlich müssen Sie CSS hinzufügen, um die maximale Höhe zu Kreis-Diagramm Höhe und Überlauf: Auto, um die Funktion des automatischen Scrollen zu haben)

Lassen Sie mich wissen, wenn Sie Hilfe benötigen damit.

Für die Alternative, können Sie dies nur tun, ohne die Originaldaten zu verändern:

var legend = svg.selectAll('.legend') 
     .data(color.domain().slice(0, 10))