更改 nvd3 图表中的边距和填充答案

【问题标题】：change margins and padding in nvd3 chart更改 nvd3 图表中的边距和填充
【发布时间】：2015-06-26 11:58:35
【问题描述】：

我有以下 nvd3 堆积面积图：

我想在数字/日期和图表以及顶部的图例和图表之间添加边距。（请看图片，我用红线标出了位置：

我一直在研究呈现的 html，但无法通过 css 访问边距值，即使我尝试将其与 Firefox 的控制台内联。我已经能够使用这个 css 更改字体系列和颜色：

#chart1
  height: 300px
  text
    fill: #1a1f22
    font-size: 0.7em
    font-family: 'Source Sans Pro', sans-serif

但是，无论我尝试将样式附加到什么元素（文本、g、svg、...），边距方面都没有改变。

这是图表的 javascript 代码：

nv.addGraph(function() {
    var histcatexplong = [
        <?= $array ?>

    ];


    var colors = d3.scale.category20();
    var keyColor = function(d, i) {return colors(d.key)};

    var chart;
chart = nv.models.stackedAreaChart()
.useInteractiveGuideline(true)
.showControls(false)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)

.transitionDuration(300);




chart.xAxis
.tickFormat(function(d) { return d3.time.format('%e.%m.%y')(new Date(d)) });



chart.yAxis
.tickFormat(d3.format(',.2f'));

d3.select('#chart1')
.datum(histcatexplong)
.transition().duration(1000)
.call(chart)


.each('start', function() {
setTimeout(function() {
d3.selectAll('#chart1 *').each(function() {

if(this.__transition__)
this.__transition__.duration = 1;
})
}, 0)
});

nv.utils.windowResize(chart.update);


return chart;
});

我一直在阅读 nvd3 的示例和文档，但仍然找不到上述操作的方法。有人知道怎么做吗？

【问题讨论】：

标签： javascript css charts nvd3.js

【解决方案1】：

关于您的边距问题，您可以通过调用以下方式更改图例周围的边距：

 chart.legend.margin().bottom = 50;

或者：

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

您可以使用常规的D3 tickPadding function 在刻度和轴之间添加空格：

 chart.yAxis.tickPadding(25);
 chart.xAxis.tickPadding(25);

喜欢this Plunker。

【讨论】：

【解决方案2】：

.nvd3 .nv-axis.nv-x path.domain {
  stroke-opacity: 1;
  stroke: red;
}

CSS 可能是要走的路。（NVD3默认使x轴不可见，所以你首先要设置它的不透明度为1。）

this Plunker 中的示例。

【讨论】：