如何更新 nvd3 图表中 xAxis 的边距或填充？

Question

Plnkr: http://plnkr.co/edit/ymrqIOGTBqF6TVMTvC4T?p=preview

^ 在我上面的例子中，xAxis 时间数据太靠近图表的底部，我一直在玩 CSS，但没有任何运气让任何东西移动。有没有另一种方法可以在 xAxis 时间数据和图表之间给出至少 5 个像素 space padding/margin？

我尝试过的：

#chart {
  height: 400px;
}

.nv-axisMaxMin,
.nv-axisMaxMin-x,
.nv-axisMin-x {
  position: relative;
  top: 5px;
  margin-top: 5px;
}

即使这样也行不通：

svg text {
    font: 400 12px Arial;
    margin-top: 5px;
    position: absolute; // Just move! :'(
    top: 10px;
}

Answer 1

更改 css 将不起作用，因为文本的 x 和 y 值属性是动态生成的。

这是一个厚颜无耻的做法，

// FOR THE REGULAR VALUES
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i){
    d3.select(this).attr('dy', '2em');
});

// For the MIN and MAX values    
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i){
    d3.select(this).attr('dy', '2em');
})

希望对您有所帮助。

如何更新 nvd3 图表中 xAxis 的边距或填充？

How to update the margin or padding for the xAxis in nvd3 chart?

javascript

css

svg

charts

nvd3.js