d3.js - 垂直对齐 nvd3 图例

Question

简短的问题:有没有办法让我们在图表容器的左侧或右侧垂直对齐 nvd3 图例？

我已经尝试修改容器的宽度和高度，但它不起作用..而且它基本上抑制了容器本身。另一方面，如果我手动使用 d3.select(".nv-legendWrap").attr("transform", "translate(x,y)");要移动图例容器，它也不能正常工作，因为在图例上单击它会返回到顶部的常规位置，而图表容器的高度会被抑制。

关于在 nvd3 源代码或一些 css 技巧中修改的地方有什么想法吗？谢谢。

Answer 1

NVD3 没有影响图例位置的选项，因此您要么必须手动操作(正如您已经尝试过的那样)，要么修改源代码。对于 line chart，您究竟需要修改什么取决于您使用的图表比如在160行设置position。

您当然也可以修改 nv-legendWrap 类的 CSS，例如给它一个固定的位置。您仍然需要计算出确切的位置值以将其放置在您想要的位置，但这样即使重新生成图表，它也会保持在原位。