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。

Answer 2

结帐你的jsfiddle的this版本。我已经更正了一些计算，以显示右侧的图例。突出显示下面的代码更改。

var ids = Context.TableB
     .Where(p => p.FieldD == conditionD)
     .Select(p => p.FieldC);
var result = Context.TableA
     .Where(p => ids.Contains(p.FieldB))
     .ToList();

如何将图例定位在圆环图的右侧

2 个答案: