nvd3离散条形图不占用整个svg区域答案

【问题标题】：nvd3 discrete bar chart doesnot take entire svg areanvd3离散条形图不占用整个svg区域
【发布时间】：2015-01-31 07:52:14
【问题描述】：

我在使用 nvd3 的垂直条形图时遇到了这个问题，其中我添加到 svg 的图表没有占用 svg 的整个区域，因此没有正确对齐。下图你可以看到，在方框 5 中，图表只占据了最右边的区域，而不是占据了整个方框。

有人可以帮助我解决这个问题吗？我已经研究了好几个小时了，并没有在网上找到任何有用的东西。

TIA

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。

标签： css d3.js charts nvd3.js

【解决方案1】：

现在帮助您解决这个问题可能为时已晚，但我会为下一个出现的人解决这个问题。我还没有对离散条形图进行过测试，但我知道它适用于饼图。

将图表的边距设置为负值 - .margin({top: -20, right: -20, bottom: -20, left: -20})

我的结果：

之前

之后

稍微偏离中心......但你明白了它的要点。

【讨论】：

感谢您的回答。它有助于找出实际的解决方案

【解决方案2】：

考虑到您没有指定任何代码，我将猜测如何解决您的问题....

如果你在 html 中这样调用你的图表

     <div id="chart1">
            <svg></svg>
     </div>

确保你有这样的 CSS -

#chart1 {
height: 600px;
width: 600px;
float: left;
margin-top: 60px;
padding-bottom: 0px;
}

或者如果你想在 javascript 中设置宽度和高度，编辑你的代码看起来像这样 -

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(true)
    .tooltips(false)
    .showValues(true)
    .options({ height: 600,
     width: 600,
     });

希望对你有帮助

【讨论】：

它有助于间距，但左侧间隙仍然存在。它仍然无法获取整个 svg。

【解决方案3】：

在尝试了很多技巧之后，我发现图表未正确对齐 svg 的原因是由于 nv.d3.js 库本身中图表边距的硬编码值。

更改第 3208 行中的边距值有助于我正确拟合图表。

【讨论】：