垂直对齐nvd3图例 [英] Vertically align nvd3 legend

问题描述

简短的问题:有没有一种方法可以使nvd3图例在图表容器的左侧或右侧垂直对齐?

Short question: Is there a way we can vertically align the nvd3 legend on either left or right side of the chart container?

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

I have tried modifying the width and height of the container but it doesnt work..and it basically suppresses the container itself. On the other hand, if I manually use d3.select(".nv-legendWrap").attr("transform", "translate(x,y)"); to move the legend container, it doesnt work as well because on legend click it returns back to its regular place at the top with the chart container being suppressed in terms of its height.

关于在nvd3源代码中的哪里修改或某些CSS技巧的任何想法?谢谢.

Any idea about where to modify in the nvd3 source or some css trickery? Thanks.

推荐答案

NVD3没有影响图例放置的选项，因此您要么必须手动进行(如您已经尝试过的)或修改源.对于

NVD3 doesn't have an option to affect the placement of the legend, so you'll either have to do it manually (as you've tried already) or modify the source. What exactly you need to modify depends on the graph you're using, for the line chart for example, the position is set in line 160.

您当然也可以修改 nv-legendWrap 类的CSS并为其指定固定位置.您仍然必须找出确切的位置值才能将其放置在所需的位置，但是通过这种方式，即使重新生成图形，它也将保留在原位.

You can of course also modify the CSS for the nv-legendWrap class and give it a fixed position for example. You'll still have to figure out the exact position values to put it where you want though, but this way it would stay in place even when the graph is regenerated.

这篇关于垂直对齐nvd3图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！