Vertically align nvd3 legend

。_饼干妹妹 提交于 2019-12-23 22:46:59

问题


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

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.

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


回答1:


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.

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.



来源:https://stackoverflow.com/questions/19139329/vertically-align-nvd3-legend

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!