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

时间:2017-12-06 08:11:05

标签: javascript d3.js svg

这是我的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) + ')');

我尝试使用上面的代码,但它无法正常工作。

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

结帐你的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();