javascript - D3 - 删除填充以使图形填充页面

Question

我在尝试删除此图上的填充时有点卡住了。 SVG 似乎正确地占用了可用空间，但 SVG 中的“G”较小。我所追求的是 SVG 中的“G”也能占据整个 body 区域。

我认为这很简单，例如只需将下面的代码设置为 0 即可。然而，这迫使事情离开了页面。

// 2. Use the margin convention practice 
var margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },

谁能帮我得到适合高度和宽度的图表？

http://jsfiddle.net/spadez/wkjx1c38/1/

Answer 1

当您将边距设置为 0 时，图表适合主体的高度和宽度。问题出在轴标签和刻度上:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale));

您正在图表下方移动轴。如果我是你，我会将页边距更改为最小值，但仍然允许轴刻度和标签适合页面。或者，您可以尝试根据轴的大小更改图形的宽度和高度，但我认为这会很痛苦，不值得付出努力。

所以我只想:

margin = {
    top: 10,
    right: 35,
    bottom: 20,
    left: 30
}

还有另一种解决方案 - 更改轴标签并将它们放置在图形中 - 然后您可以将边距更改为 0 并且仍然可以看到描述。