nvd3饼图图例位置

Question

我正在尝试创建一个饼图，其中右边的图例将所有项目垂直拆分为每项一行。我实际上是在考虑legendPosition = right这样做，但是似乎图例只是以浮动方式放在图表的右侧：

期待投入

Answer 1

Alfin请尝试一下...

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小提琴演示：https : //jsfiddle.net/geogeorge/wgx6shqa/show/