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

Question

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

我试过了：

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

但它没有用。

我该如何解决这个问题？

jsFiddle

Answer 1

看一下第102行的xTicks属性。

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

您可以在那里翻译和旋转您的比例值。

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

和tipp： 玩这些属性，第一个旋转参数到＆＃34; -45＆＃34;让它真的更好阅读，所以你不必每次都转过头来;）

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

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)");

Answer 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值以增加图例之间的空间。