0
我想用我自己的数据而不是示例中提供的随机数据(http://bl.ocks.org/mbostock/4060954)使用d3 streamgraph。无法获得d3.layout.stack填写d3.svg.area
var d3Data = [
{"label" : 0, "value1":105, "value2":95},
{"label" : 1, "value1":95, "value2":115},
{"label" : 2, "value1":85, "value2":75},
{"label" : 3, "value1":75, "value2":175},
{"label" : 4, "value1":85, "value2":75},
{"label" : 5, "value1":85, "value2":75},
{"label" : 6, "value1":85, "value2":75},
{"label" : 7, "value1":85, "value2":75}
];
var n = 2, // number of layers
m = d3Data.length, // number of samples per layer
layers = d3.layout.stack().offset("wiggle")(["value1", "value2"].map(function(layer) {
return d3Data.map(function(d) {
return {x: d.label, y: +d[layer]};
});
}));
console.log(layers);
var layers0 = layers[0],
layers1 = layers[1];
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(layers, function(layer) { return d3.max(layer, function(d) { console.log(d.y); return d.y0 + d.y; }); })])
.range([height, 0]);
var color = d3.scale.linear()
.range(["#aad", "#556"]);
var area = d3.svg.area()
.x(function(d) { console.log(d.x); return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
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(0.5); }); //Math.random()
function transition() {
d3.selectAll("path")
.data(function() {
var d = layers1;
layers1 = layers0;
return layers0 = d;
})
.transition()
.duration(2500)
.attr("d", area);
}
我的问题是:为什么该区域没有填充? var area = d3.svg.area()中的console.log从不触发。预先感谢您的任何帮助。
这真的很有帮助马克! – Tiramisu