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 },