D3叠加条形图g和rect未显示
D3叠加条形图g和rect未显示
提问于 2015-09-02 15:51:47
我对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>联署材料：
//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"
})任何帮助都会很感激，甚至链接到使用类似数据的堆叠条形图上的伟大教程(我能找到的大多数都是矩阵)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-02 16:24:51
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 },页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32357685
复制相关文章
相似问题
腾讯云开发者
