16

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

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

我想做的一个例子： 在此处输入图像描述

4

6 回答 6

14

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

于 2015-07-02T21:56:00.373 回答
12

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

d3.select(".nv-legendWrap")
  .attr("transform", "translate(100,100)");
于 2013-07-02T08:39:30.013 回答
6

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

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

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

于 2014-03-19T03:45:51.367 回答
3

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

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})
于 2016-02-24T19:00:49.653 回答
1

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

举个例子：

chart.legend.rightAlign(false);
于 2017-02-15T09:37:01.740 回答
1

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

于 2016-05-10T10:18:20.443 回答