D3堆疊條形圖g和矩形不顯示

Question

我是D3的新手，並從小JSON數據集的小堆積條形圖上工作。元素顯示在DOM中，但我無法讓它們實際在頁面上呈現。下面是一個代碼筆鏈接：

http://codepen.io/robmweb/pen/epYyLB

，這裏是爲子孫後代的緣故相關的HTML和JS： HTML：

<div class="container-dashboard"> 
    <div class="report-card"> 
    <div class="card-content" id="report-issues"> 

    </div> 
    </div> 
</div> 

JS：

//data 
var width = 400; 
var height = 250; 
var data = 
[ 
    { 
    type: 'Functional', 
    total: 8, 
    stacks: [1, 1, 2, 4] 
    }, { 
    type: 'Technical', 
    total: 3, 
    stacks: [1, 1, 1, 0] 
    }, { 
    type: 'GUI', 
    total: 10, 
    stacks: [3, 0, 0, 7] 
    }, { 
    type: 'Crash', 
    total: 8, 
    stacks: [8, 0, 0, 0] 
    } 
]; 

//add the svg 
var svg = d3.select("#report-issues").append("svg") 
    .attr({ 
    class: 'chart', 
    width: '400', 
    height: '250' 
    }); 

/* 
var xScale = d3.scale.linear() 
    .domain([0, d3.max(data.stacks)]) 
    .range([0, width]); 
*/ 

var g = svg.selectAll('g').data(data); 

g.enter().append('g').attr({ 
    w: function (d, i) { return width }, 
    h: function (d, i) { return 30 }, 
    'transform': function (d, i) { 
    return 'translate(0,' + i * 30 + ')'; 
    }, 
    'fill': "black" 
}) 

var rect = g.selectAll('rect').data(function(d) { 
    return d.stacks; 
}); 

rect.enter().append('rect').attr({ 
    w: function (d, i) { return d * 3 }, 
    h: function (d, i) { return 10 }, 
    x: function (d, i) { return 0 }, 
    y: function (d, i) { return 0 }, 
    'fill': "red" 
}) 

任何幫助將不勝感激，甚至鏈接到堆疊條形圖上使用類似數據的大教程（大多數我可以找到矩陣）。

Answer 1

SVG元素大小的正確屬性是height和width，而不是h和w。您的代碼可能存在其他問題，但這種更改至少會使欄可見。

g.enter().append('g').attr({ 
    width: function (d, i) { return width }, 
    height: function (d, i) { return 30 }, 

//... 

rect.enter().append('rect').attr({ 
    width: function (d, i) { return d * 3 }, 
    height: function (d, i) { return 10 },