d3.js - 自動滾動的餅圖傳說

Question

Pie chart with long legend

我使用這個代碼d3.js餅圖：

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

結果包含了很多的項目，餅圖看起來OK ，但傳說太長了。我現在想讓餅圖中心的圖例元素自動滾動，以便圖例不會與餅圖本身重疊。

這怎麼辦？

作爲一種替代方法，您如何將圖例限制爲只有10個項目？ （不會將餅圖結果限制爲10個項目）

Answer 1

要製作可滾動容器，您必須爲圖例創建一個單獨的svg，並將其包含在div內並將div定位到所需的座標。 （當然，你必須添加CSS到div，即最大高度爲餅圖高度和溢出：自動;具有自動滾動功能）

讓我知道如果你需要幫助接着就，隨即。

對於替代，你可以做到這一點，而不改變原來數據：

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