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

Question

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

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

TIA

Answer 1

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

如果您在 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 2

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

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

我的结果：

之前

之后

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

Answer 3

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

更改第 3208 行中的边距值帮助我正确调整了图表。

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

nvd3 discrete bar chart doesnot take entire svg area

css

charts

d3.js

nvd3.js