d3.js甜甜圈圖，外面有甜甜圈圖例

Question

在以下代碼中，我想將甜甜圈圖例放在其右側的甜甜圈之外：

http://bl.ocks.org/juan-cb/1984c7f2b446fffeedde

我應該更改哪個行代碼來執行此操作？

   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 = -3 * legendRectSize;
        var vert = i * height - offset;
        return 'translate(' + horz + ',' + vert + ')';
    });

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

與此類似：

http://www.jqueryscript.net/demo/jQuery-Plugin-To-Convert-Tabular-Data-Into-Donut-Charts-Chart-js/

編輯：解決方案只是更改水平和垂直坐標的問題。 不需要復雜的東西。

Answer 1

這兩個變量：

var horz = -3 * legendRectSize; // X-axis translation.
var vert = i * height - offset; // Y-axis translation.

您可以修改horz和vert公式進行翻譯。 像這樣：

var horz = 30 * legendRectSize; // Will be right side of the donut chart.
var vert = i * height - offset; // Still at the middle of the donut chart vertically.