javascript - nvd3饼图图例位置

Question

我正在尝试创建一个饼图，其图例位于右侧，所有项目垂直分成每个项目的一行。我实际上预计 legendPosition = right 会这样做，但似乎图例仅以 float 方式放置在图表的右侧:

期望输出是

Answer 1

阿尔芬请尝试这个...

var data= [
      {
        "label": "One",
        "value" : 29.765957771107
      } ,
      {
        "label": "Two",
        "value" : 0
      } ,
      {
        "label": "Three",
        "value" : 32.807804682612
      } ,
      {
        "label": "Four",
        "value" : 196.45946739256
      } ,
      {
        "label": "Five",
        "value" : 0.19434030906893
      } ,
      {
        "label": "Six",
        "value" : 98.079782601442
      } ,
      {
        "label": "Seven",
        "value" : 13.925743130903
      } ,
      {
        "label": "Eight",
        "value" : 5.1387322875705
      }
]
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .labelType("percent")
      .donut(true)
      .donutRatio(0.35)
      .width(300) // width
      .height(300);

    d3.select("#chart svg")
        .datum(data)
      .transition().duration(1200)
        .call(chart);
 
   var positionX = 300;
  var positionY = 40;
  var verticalOffset = 25;

  d3.selectAll('.nv-legend .nv-series')[0].forEach(function(d) {
    positionY += verticalOffset;
    d3.select(d).attr('transform', 'translate(' + positionX + ',' + positionY + ')');
  }); 


  return chart;
});

#chart svg {
  height: 300px;
}


.nv-label text{
    font-family: Droid Sans;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" rel="stylesheet"/>


<div id="chart">
  <svg></svg>
</div>

js fiddle 演示:https://jsfiddle.net/geogeorge/wgx6shqa/show/