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.

d3.js甜甜圈图表与甜甜圈外的传说

1 个答案: