问题
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