d3.js Ringdiagramm mit Legende außerhalb Donut

Question

Im folgenden Code, würde Ich mag die Donut-Legenden außerhalb des Donut setzen, auf seiner rechten Seite:

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

Welche Zeile Code sollte ich tun ändern es?

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

Etwas ähnlich wie diese:

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

Edit: die Lösung war nur eine Frage der horizontalen und vertikalen Koordinaten zu ändern. Keine Notwendigkeit für komplizierte Sachen.

Answer 1

Diese 2 Variablen:

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

Sie horz und vert Formeln für die Übersetzung ändern könnte. Wie folgt aus:

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.