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

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)。

还有小费: 玩转这些属性，第一个旋转参数为“-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)");