javascript - 如何将图例定位到圆环图的右侧

Question

这是我的 plunkr code , 在图例居中的这个位置，我如何将它定位到圆环图的右侧？

var svg = d3.select('#chart')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + (width / 2 - radius) +
        ',' + (height / 2 - radius) + ')');

我试过上面的代码，但它不起作用。

Answer 1

定义新变量并以像素为单位设置图例宽度:

var legendWidth = 150;

将此变量用于 svg 元素宽度:

var svg = d3.select('#chart')
  .append('svg')
  .attr('width', width + legendWidth) // <== !!!
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) +
    ',' + (height / 2) + ')');

以这种方式重写图例 transform 属性的函数:

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 vert = i * height - offset;
    return 'translate(' + width / 2 + ',' + vert + ')'; // <== move every legend item on half of width
  });

检查 working example here .