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

Question

尝试删除此图上的填充区时，我有些卡住。 SVG似乎正确占用了可用空间，但是SVG内部的“ G”较小。我所追求的是SVG内部的“ G”字样也占据了整个身体区域。

我认为这很简单，例如，将下面的代码设置为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，并且仍然可以看到说明。