返回信息流在网上下载了D3的一个stream graph的例子，但是不太明白是怎么实现的？
<!DOCTYPE html>
<meta charset="utf-8">
<title>Streamgraph</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
button {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<button onclick="transition()">Update</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var n = 5, // number of layers
m = 60, // number of samples per layer
stack = d3.layout.stack().offset("wiggle"),
layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));
var width = 960,
height = 500;
var x = d3.scale.linear()
.domain([0, m - 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);
var color = d3.scale.linear()
//.range(["#aad", "#556"]);
//.range(["#ffffff", "#80c080"]);
.range(["#17f538", "#00538b"]);
var area = d3.svg.area()
.x(function(d) { return x(d.x); }) //x表示数据在横坐标的位置
.y0(function(d) { return y(d.y0); }) //y0可以认为是总高度
.y1(function(d) { return y(d.y0 + d.y); }); //y1表示数据在纵坐标的高度
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("path")
.data(layers0)
.enter().append("path")
.attr("d", area)
.style("fill", function() { return color(Math.random()); });
var dataset= [1,2,3,4,5];
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text("New paragraph!")
.attr("x",function(d) {return d*(500/dataset.length);})
.attr("y",200)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");;
function transition() {
d3.selectAll("path")
.data(function() {
var d = layers1;
layers1 = layers0;
return layers0 = d;
})
.transition()
.duration(2500)
.attr("d", area);
}
// Inspired by Lee Byron's test data generator.
function bumpLayer(n) {
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < n; i++) {
var w = (i / n - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
var a = [], i;
for (i = 0; i < n; ++i) a[i] = 0;
for (i = 0; i < 5; ++i) bump(a);
console.log(a[0])
/*
var a = [], i;
i=5;
a[0]=1;
a[1]=5;
a[2]=20;
a[3]=2;
a[4]=100;
*/
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
</script>
请问为什么在最后的bumper函数中，我自己写了a[]的五个值跟随机生成的差那么多？貌似bump函数生成的a【】不止五个值？
弄了很久，求大神指导，谢谢~~~
这是一条镜像帖。来源：北邮人论坛 / www-technology / #27708同步于 2014/10/9
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
求问D3中的数组值
ccy
2014/10/9镜像同步5 回复
订阅后，新回复会通过你的通知中心匿名送达。
5 条回复
两次调的时候
a都是60个呢。。
var n = 5, // number of layers
m = 60, // number of samples per layer
stack = d3.layout.stack().offset("wiggle"),
layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));
是啊，才发现是60个，谢谢解答啊~~~那整个最后一句是什么意思？
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
也没看到有定义d,x,y呀？
另外是怎么控制layer的范围的？求指教，多谢啊~~~
【 在 weiyitheonly 的大作中提到: 】
: 两次调的时候
: a都是60个呢。。
: var n = 5, // number of layers
: ...................
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
相当于
function abc(d, i) { return {x: i, y: Math.max(0, d)}; }
for(var i =0; i < a.lenght; i++)
{
abc(a[i], i);
}
这样看的话，d是循环的那一项的值。x 和 y不是变量，是object的属性名。
控制范围是啥？
这个懂了，谢谢你啊~~~
另外为什么这些layer会这么随机且不相关的排列？（如图一）
而当我人工设定数组a[]的值，如：
function bumpLayer(n) {
var a = [], i;
for (i = 0; i < n; ++i)
{a[i] = i%20;
console.log(a[i])
}
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
返回的却是第二个图？不应该是平行的山峰吗，怎么变成向右下倾斜的山峰？
多谢帮忙啊~~~
【 在 weiyitheonly 的大作中提到: 】
: return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
: 相当于
: function abc(d, i) { return {x: i, y: Math.max(0, d)}; }
: ...................