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

【问题标题】：How to change the position of labels in nvd3 graph?如何更改标签在 nvd3 图中的位置？
【发布时间】：2015-03-11 13:24:32
【问题描述】：

这是我目前的 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;
});

};

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

【问题讨论】：

标签： charts nvd3.js

【解决方案1】：

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

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

我创建了一个示例here。

【讨论】：

如果您的数据中只有少量项目，则可以。 s3blog.org/screengrab/…

【解决方案2】：

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

【讨论】：

【解决方案3】：

谁使用选项......在选项之后添加这个......

$timeout(function () {

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


  }, 1000);

【讨论】：

【解决方案4】：

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

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

【讨论】：