d3.js-饼图图例的自动滚动

我有一个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; });

结果包含很多项，饼图看起来不错，但图例太长。现在，我想使图例元素在饼图的中心自动滚动，以便图例不会与饼图本身重叠

如何做到这一点

---

或者，如何将图例限制为仅10个项目？（在不将饼图结果限制为10项的情况下）

要制作一个可滚动的容器，您必须为图例本身创建一个单独的svg，并将其包含在div中，并将div定位到所需的坐标。 （当然，您必须将CSS添加到div中，即最大高度为饼图高度，溢出：auto；具有自动滚动功能）

如果你需要帮助，请告诉我

作为替代方案，您可以在不更改原始数据的情况下执行此操作：

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