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

Related Query

More Query from same tag