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

Question

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

默认情况下它位于顶部,我希望它放在一边(更好地利用我的应用程序中的空间)

我想做的一个例子:

Answer 1

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

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

Answer 2

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

您可以通过编辑JS文件本身来永久更改nvd3图表模型的图例位置.对于图表刷新,这可能比在初始化中包含定位更有效.搜索JS(如multiBarChart.js或lineChart.js) g.select('.nv-legendWrap').一个.attr刚过将被定义,取代:

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

其中10是x值,图例被移位,270是y值,它被移位.