Fab*_*ian 3 layout stack d3.js
I need a very basic example to create a stack chart like this example with a predefined array like this:
var data = [[ 1, 4, 2, 7],
[21, 2, 5, 10],
[ 1, 17, 16, 6]]
Run Code Online (Sandbox Code Playgroud)
Whatever I do ends creating errors. E.g. TypeError: data is undefined. Here is my simplified code so far:
<!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>
Run Code Online (Sandbox Code Playgroud)
您可以在http://jsfiddle.net/DyrsK/2/上看到一个工作示例.
通常我发现更容易置换输入数据以进入d3
预期的默认形式.在这个例子中我把你的数据和计算的x
,y
和y0
值,然后通过了以默认的堆栈布局.
var data = [[ 1, 4, 2, 7],
[21, 2, 5, 10],
[ 1, 17, 16, 6]];
// permute the data
data = data.map(function(d) {
return d.map(function(p, i) {
return {x:i, y:p, y0:0};
});
});
Run Code Online (Sandbox Code Playgroud)
我认为有一种更简单的方法可以做到这一点,但是由于你的输入数据是一个值,但函数希望它是一个参考值,因此我遇到了out()
函数问题.这意味着没有办法用计算的偏移更新值,因此返回的数据总是等于输入值.d3.layout.stack()
out()
stack()
在使堆栈功能起作用后,其余部分几乎跟随您链接到的示例:
var stack = d3.layout.stack()
.offset("zero")
var layers = stack(data);
var area = d3.svg.area()
.interpolate('cardinal')
.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(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d); })
.style("fill", function(d, i) { return colors(i); });
Run Code Online (Sandbox Code Playgroud)
希望这可以帮助!