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

【问题标题】：How do I change the legend position in a NVD3 chart?如何更改 NVD3 图表中的图例位置？
【发布时间】：2013-06-29 07:22:52
【问题描述】：

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

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

我想做的一个例子：

【问题讨论】：

标签： charts d3.js legend nvd3.js

【解决方案1】：

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

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

【讨论】：

感谢拉斯的回答。当我用折线图尝试这个并尝试使用图例中的点来打开/关闭线条时，图例会返回到它的原始位置。将相同的代码添加到它的“onclick”行为中也会产生不稳定的结果。还有什么建议吗？
您必须确保“撤消”任何这些修改（或修改 NVD3 源）。
@user3898336 回答没有 Tariq Khokhar 提到的问题

【解决方案2】：

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

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

其中 10 是图例移动的 x 值，270 是移动的 y 值。

【讨论】：

我面临同样的问题，但我尝试了 Brian Hogan 的建议，不幸的是它不起作用。我也尝试了 nvd3.js 文件..根本没有改变..
很抱歉听到这个 user1234。如果您在 stackoverflow 上发布 jsfiddle、codepen 或其他问题的链接，社区可能会为您提供帮助。

【解决方案3】：

截至撰写本文时（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

【讨论】：

最好添加对说明这一点的文档的引用。
看来文档已经更新了，所以我添加了一个链接
它似乎不适用于他们自己的 Live Code 功能：nvd3.org/livecode/index.html#codemirrorNav

【解决方案4】：

我一直在尝试用折线图解决同样的问题。首先我刚刚添加了一个

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

但当您调整图表大小时，它会恢复为默认值。因此，我还复制了该行并将其添加到我的 windowResize() 函数中，该函数有效。但是，当我单击图例以隐藏/显示线条时，它会移回默认位置。

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

似乎在制图方面没有简单的解决方案。 NVD3.js 文档非常缺乏和有限。但是 D3.js 庞大且复杂……你不能同时拥有轻松和自定义，你必须放弃其中一个。

更新： 如果您只需要稍微移动它，您可以简单地执行以下操作：

chart.legend.margin({top: 0, right: 0, left: 0, bottom: 20})

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

关于图例的文档在这里： http://nvd3-community.github.io/nvd3/examples/documentation.html#legend

举个例子：

chart.legend.rightAlign(false);

【讨论】：