如何更改NVD3图表中的图例位置？

Question

有人知道如何在NVD3图表中相对于图表本身重新定位图例吗？

默认情况下它位于顶部，我希望它能够放在一边（更好地利用我应用中的空间）

我想做的一个例子：

Answer 1

截至撰写本文时（2015年7月2日） nvd3 支持将图例放在饼图右侧。

初始化图表时，请将legendPosition设置为right。

示例：

nv.addGraph(function() {
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })          
      .legendPosition("right");


    svg.datum(piedata).call(chart);

  return chart;
});

请参阅http://nvd3-community.github.io/nvd3/examples/documentation.html#pieChart

Answer 2

AFAIK没有选项可以执行此操作，但您可以手动选择包含图例的g元素并移动它，例如

d3.select(".nv-legendWrap")
  .attr("transform", "translate(100,100)");

Answer 3

您可以通过编辑JS文件本身来永久更改nvd3图表模型的图例位置。对于图表刷新，这可能比在初始化中包含定位更有效。搜索JS（如multiBarChart.js或lineChart.js）：  g.select('.nv-legendWrap')。  在此之后将定义.attr，将其替换为：

.attr('transform', 'translate(10,270)')

其中10是x值，图例被移位，270是y值，它被移位。

Answer 4

我一直试图用lineChart来解决同样的问题。首先我添加了一个

...
compile 'ch.qos.logback:logback-classic:1.1.5'
compile 'org.slf4j:slf4j-api:1.7.16'

但是当您调整图表大小时，它会恢复为默认值。所以我也复制了这一行并将其添加到我的windowResize（）函数中，该函数有效。但是当我点击图例来隐藏/显示线条时它会移回到默认位置。

我认为最好的解决方案可能是编辑js文件。

似乎在绘制图表时，没有简单的解决方案。 NVD3.js文档非常缺乏和有限。但是D3.js庞大而且复杂......你只是不能轻松和定制，你必须放弃一个或另一个。

<强>更新 如果你只是需要移动一点，你可以简单地执行以下操作：

d3.select('.nv-legendWrap').attr('transform', 'translate(0, 475)')

Answer 5

您可以调整chart.legend.margin。它有top，right，left，bottom作为属性。

Answer 6

关于传奇的文件在这里： http://nvd3-community.github.io/nvd3/examples/documentation.html#legend

作为一个例子：

chart.legend.rightAlign(false);