Размеры svg "g" застряли на 0 (авто)

Question

Я пытаюсь создать что-то на JSfiddle относительно вопроса о d3, но я попал в засаду от неожиданной проблемы - элемент «», который я создаю внутри " svg "отказывается принимать любые размеры, которые я им даю!

Я пробовал использовать встроенный стиль, классы (включая «!important»), но ничего не работает. Размеры застряли в 0,0 и осмотр показывает, ширина и высота «auto» (почему ?!)

Это кажется тривиальным вопросом, но для жизни меня я не могу показаться, чтобы получить элемент «g» в принимают значения ширины и высоты

см JSFiddle: http://jsfiddle.net/sangil/uKLU3/

Answer 1

<g> является Autosizing контейнера. Он не имеет самих измерений, но вместо этого он автоматически автоматически определяет все содержимое.

Причина, по которой вы ничего не видите, заключается в том, что SVG (в отличие от html) не упорядочивает вещи с использованием стилей, а использует атрибуты. Таким образом, вы хотите

g.append("rect") 
    .attr("width", "300px") 
    .attr("height", "200px") 
    .style("fill", "steelblue");