在图例和图表之间添加一些间隙答案

【问题标题】：Add some gap in between legend and the chart在图例和图表之间添加一些间隙
【发布时间】：2014-07-08 06:15:17
【问题描述】：

在my fiddle here，我想在顶部的图例和图表之间添加一些间隙，以便更好看。

我试过了：

d3.select(".nv-linesWrap").style("padding-top","50px");

但它没有工作。

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

查看第 102 行中的 xTicks 属性。

.attr('transform', function(d,i,j) { return 'translate (-10, 40) rotate(-90 0,0)' });

您可以在此处平移和旋转您的比例值。

在您的情况下，只需提高第二个翻译参数的值 (40->60)。

还有一个提示：玩转这些属性，第一个 rotateparameter 到“-45” 使它更好阅读，所以你不必每次都转头;）

//编辑（错误解决方案）

legendwrap 具有与 translate 函数相同的功能和相同的行为。只需在第 110 行插入以下内容：

 d3.select(".nv-legendWrap")
        .style("float", "right")
        .attr("transform", "translate(0,-75)");

也许您现在必须调整放置整个图表的整个 SVG 容器的大小

//EDIT2（改进）

要调整整个图表的大小（或 margin-top+25），我使用了以下方式：只需将这部分放在你的 legendWrap 之后。

     d3.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)");

【讨论】：

【解决方案2】：

您可以控制图表图例与图表的距离，如下所示：

chart.legend.margin({
    top: 0,
    bottom: 10,
    left: 0,
    right: 0
});

请根据需要修改顶部/底部值。

请注意，默认情况下 nvd3 使用以下值：{top: 5, right: 0, bottom: 5, left: 0}

对于在各个图例之间引入空格，没有直接的方法，因为这不受 CSS 属性控制，并且在 nvd3 本身中是硬编码的。

在 nvd3 legend.js 第 120 行：

seriesWidths.push(nodeTextLength + 128); // 28 is ~ the width of the circle plus some padding

您可以增加这个 28 的值来增加图例之间的间距。

【讨论】：