css - NVD3 修复图表的宽度以填充 svg 元素

Question

我仍在探索 NVD3，请耐心等待。

我试图将四个条形图并排放置，每个条形图的宽度为 25%，这就是我目前得到的:

来自该 HTML 代码:

<div class="inline">
    <div id="status" class="d3chart d3chart-sm wd-25"><svg></svg></div>
    <div id="shop" class="d3chart d3chart-sm wd-25"><svg></svg></div>
    <div id="week" class="d3chart d3chart-sm wd-25"><svg></svg></div>
    <div id="age" class="d3chart d3chart-sm wd-25"><svg></svg></div>
</div>

<svg>标记的宽度为 25%，实际上填满了每个图表左侧的空白区域，但在页面运行后呈现的图表本身并没有填满该区域:

这是整个事情的一个 fiddle :http://jsfiddle.net/re3yod01/1/

如何让这些图表填充包含它们的 svg 元素？

Answer 1

尝试注释掉图表上的边距:

.margin({top: 30, right: 20, bottom: 50, left: 175})

希望对你有帮助