svg「g」元素尺寸卡在0（自動）

Question

我試圖在JSfiddle上創建關於d3的問題，但我被一個意外問題伏擊 - 我在「 「svg」拒絕接受我給它的任何尺寸！

我試過使用內聯樣式，類（包括「!important」），但似乎沒有任何工作。尺寸是停留在0,0檢查顯示寬度和高度都是「auto」（爲什麼？）

這似乎是一個微不足道的問題，但我的生活中，我似乎無法獲得「g」元素接受寬度和高度值

看到的jsfiddle：http://jsfiddle.net/sangil/uKLU3/

Answer 1

<g>是一個自動調整大小的容器。它本身沒有尺寸，但它總是自動調整大小以包含所有內容。

你沒有看到任何東西的原因是，SVG（不像HTML）不使用樣式來設置尺寸，而是使用屬性代替。所以你想

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