nvd3饼图传说中的位置

Question

我想创建一个饼图，右边的图例与所有项目垂直分割成每行一行。我其实epecting是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˚F iddle demo：https://jsfiddle.net/geogeorge/wgx6shqa/show/