如何更改nvd3图表中标签的位置？

Question

这是我目前的nvd3饼图

如您所见，我在饼图顶部显示了所有标签（由红色方框1表示）。 我想要做的是，将这些标签的位置移动到饼图的底部（由红色框2表示）。

这是我的nvd3代码，我用它来创建这个饼图。

function graphDataStatsChart(sourceData) {
nv.addGraph(function() {
  var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)     //Display pie labels
      .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
      .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
      .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
      ;

    d3.select("#chart1 svg")
        .datum(sourceData)
        .transition().duration(350)
        .call(chart);

  return chart;
});

};

任何机构都可以提出一种方法来进行上述重新定位吗？

Answer 1

您需要更改图例容器的位置，例如

 d3.select(".nv-legendWrap")
  .attr("transform","translate(0,350)")  

我已经创建了一个示例here。

Answer 2

不幸的是，对于图表选项，您有legendPosition，但您只能将其放在饼图的顶部或右侧（请参阅http://nvd3-community.github.io/nvd3/examples/documentation.html#pieChart，legendPosition值）。

Answer 3

谁使用选项..在选项后添加...

$timeout(function () {

      d3.selectAll('.nv-legendWrap').attr("transform","translate(0,300)");


  }, 1000);