如何更改标签在 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

谁用options..在options后面加上这个...

$timeout(function () {

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


  }, 1000);

Answer 4

我找到了更好的解决方案。查看此 link 了解更多详情。

chart.legendPosition("top");
chart.legendPosition("right");
chart.legendPosition("bottom");
chart.legendPosition("left");

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

How to change the position of labels in nvd3 graph?

charts

nvd3.js