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

Question

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

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

TIA

Answer 1

帮助你解决这个问题可能已经太晚了，但我会为下一个出席的人采取行动。我没有对离散条形图进行测试，但我知道它适用于饼图。

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

我的结果：

<强>之前

<强>后

略微偏离中心......但你得到了它的要点。

Answer 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,
     });

希望这有帮助

Answer 3

在尝试了很多黑客之后，我弄清楚图表在svg中没有正确对齐的原因是因为nv.d3.js库本身的图表边缘的硬编码值。

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