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

希望对您有所帮助

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

NVD3 fixing up the width of the chart to fill up the svg element

css

nvd3.js