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

【问题标题】：How to update the margin or padding for the xAxis in nvd3 chart?如何更新 nvd3 图表中 xAxis 的边距或填充？
【发布时间】：2015-10-01 16:28:09
【问题描述】：

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

^ 在我上面的示例中，xAxis 时间数据太靠近图表底部，我一直在使用 CSS，但没有任何运气来移动任何东西。是否有另一种方法可以在 xAxis 时间数据和图表之间提供至少 5 像素的空间填充/边距？

我尝试过的：

#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;
}

【问题讨论】：

标签： javascript css svg charts nvd3.js

【解决方案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');
})

希望对你有帮助。

【讨论】：