如何在nvd3图例和图表之间添加间隙 [英] How to add a gap between the nvd3 legend and the chart

问题描述

我知道之前可能会问这个问题，而且当我试图找到这个问题的答案时，我还没有真正找到答案。与此处的小提琴类似： http://jsfiddle.net/rdesai/vfe2B/51/ ，我试图通过这样做来增加图例和图表之间的差距：

I'm aware that this question might have be asked before, and as i tried looking to get the answer for this issue, i haven't really found one. Similar to the fiddle here: http://jsfiddle.net/rdesai/vfe2B/51/, im trying to add gap between legend and chart by doing:

  graph.select(".nv-wrap.nv-legendWrap nv-legend nv-series").attr("transform", "translate(100,75)").style('padding','200px');
  graph.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)");

使用这种方法我可以移动图表的位置，但是当我点击其中一个时图例（打开/关闭圆圈），图表返回其原始位置。我也尝试过：

With this approach im able to move the position of the chart, however when i click on one of the legend( turn on/off circle), the chart goes back to its original position. i also tried:

chart = nv.models.lineChart().options({
                width: 1050
            }).margin({top: 0, right:30, left:80, bottom: 150});

但没有运气..关于如何解决这个问题的任何想法？谢谢！

but no luck.. any ideas on how this one can be solved?? Thanks!

推荐答案

您应该尝试如下：

chart = nv.models.lineChart()
chart.legend.margin({top: 0, right:30, left:80, bottom: 150});

更新了你的小提琴

希望有所帮助：）

这篇关于如何在nvd3图例和图表之间添加间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！