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

Этих 2 переменные:

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

Вы можете изменить Horz и верта формулы для перевода. Как это:

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.