我需要一个非常基础的例子来创建类似于这个例子的堆叠图,使用预定义数组如下:
var data = [[ 1, 4, 2, 7],
[21, 2, 5, 10],
[ 1, 17, 16, 6]]
无论我做什么都会出现错误,例如TypeError: data未定义。以下是我目前简化的代码:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v2.js?2.9.5"></script>
<script>
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data = [[ 1, 4, 2, 7],
[21, 2, 5, 10],
[ 1, 17, 16, 6]];
var x = d3.scale.linear()
.range([0, width])
.domain([0,3]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0,25]);
var z = d3.scale.category20c();
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var stack = d3.layout.stack(data)
.offset("zero")
.values(function(d) { return d; })
.x(function(d, i) { return i; })
.y(function(d) { return d; });
var area = d3.svg.area()
.x(function(d, i) { return x(i); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
svg.selectAll(".layer")
.data(stack)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return colors[i]; });
</script>
console.log(d)
жқҘжЈҖжҹҘd
жүҖеј•з”Ёзҡ„еҶ…е®№пјҢдҫӢеҰӮfunction(d) { console.log(d); return area(d); }
гҖӮиҝҷж ·жҲ‘е°ұеҸҜд»ҘзЎ®дҝқжҲ‘жӯЈеңЁи®ҝй—®жӯЈзЎ®зҡ„еҖјгҖӮ - Bill