D3 - Удалить заполнение, чтобы график заполнил страницу

Question

Я немного застрял, пытаясь удалить отступы на этом графике.Кажется, что SVG правильно занимает доступное пространство, однако «G» внутри SVG меньше.Что мне нужно, так это "G" внутри SVG, чтобы также охватить всю область тела.

Я подумал, что это будет просто, например, просто установив код ниже 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 и при этом иметь описание видимым.