d3.js - Autoscroll for pie chart legend - d3.js

Question

Pie chart with long legend
I have a d3.js pie chart which uses this code:
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; });
The result contains a lot of items, the pie charts looks OK, but the legend is too long. I now want to make the legend elements autoscroll in the center of the pie chart so that the legend does not overlay with the pie chart itself.
How can this be done?
As an alternative, how do you limit the legend to just 10 items? (without limiting the pie chart results to 10 items)

Answer 1

To make a scrollable container, you'll have to create a separate svg for the legends itself and contain it within a div and position the div to the coordinates you need.
(Of course, you'll have to add CSS to the div i.e. max-height to be pie-chart height and overflow: auto; to have the feature of auto-scrolling)
Let me know if you need help with that.
For the alternative, you can just do this without altering the original data:
var legend = svg.selectAll('.legend')
.data(color.domain().slice(0, 10))