[英]d3.js stacked graph
I've implemented a JSON Callback function which retreives data to create the following graph based on this template: http://mbostock.github.com/d3/ex/stack.html . 我已经实现了一个JSON回调函数,该函数检索数据以基于此模板创建以下图形: http : //mbostock.github.com/d3/ex/stack.html 。 I believe that the issue is that I'm cutting off certain necessary information to the browser so that when it goes to call the function transitionGroup();. 我认为问题在于,我切断了浏览器的某些必要信息,以便在调用该函数时会调用transitionGroup();函数。 The error this code produces is that it basically cannot find the width of each bar nor the x-value at which they should be placed along the axis. 该代码产生的错误是,它基本上找不到每个条形图的宽度,也找不到沿轴放置它们的x值。 Any help would be much appreciated! 任何帮助将非常感激!
Thanks 谢谢
var numCases,
arrayOfUserData,
data,
numLayers,
width = 960
margin = 20
height = 500 - .5 - margin;
/* x,
y0,
y1,
y2; */
d3.json("dataURL.com", function(json){
arrayOfUserData = json.test_funfData;
console.log("User Funf Data: ", arrayOfUserData);
console.log("Phone_calls", arrayOfUserData[0].Phone_Calls);
var numLayers = arrayOfUserData.length - 1, // number of layers
numCases = arrayOfUserData.length, // number of users
data = create_funf_layers(numLayers,numCases,arrayOfUserData),//d3.layout.stack() (stream_layers(numLayers, numCases, .1)),
color = d3.interpolateRgb("#aad", "#556");
console.log(create_funf_layers(numLayers, numCases, arrayOfUserData));
console.log(arrayOfUserData);
console.log("working data: ",data);
var margin = 20,
width = 960,
height = 500 - .5 - margin,
mx = numCases,
my = d3.max(data, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
}),
mz = d3.max(data, function(d) {
return d3.max(d, function(d) {
return d.y;
});
});
x = function(d) { return d.x * width / mx; },
y0 = function(d) { return height - d.y0 * height / my; },
y1 = function(d) { return height - (d.y + d.y0) * height / my; },
y2 = function(d) { return d.y * height / mz; }; // or `my` to not rescale
var vis = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height + margin);
var layers = vis.selectAll("g.layer")
.data(data)
.enter().append("g")
.style("fill", function(d, i) { return color(i / (numLayers - 1)); })
.attr("class", "layer");
var bars = layers.selectAll("g.bar")
.data(function(d) { return d; })
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });
bars.append("rect")
.attr("width", x({x: .9}))
.attr("x", 0)
.attr("y", height)
.attr("height", 0)
.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", y1)
.attr("height", function(d) { return y0(d) - y1(d); });
var labels = vis.selectAll("text.label")
.data(data[0])
.enter().append("text")
.attr("class", "label")
.attr("x", x)
.attr("y", height + 6)
.attr("dx", x({x: .45}))
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(function(d, i) { return arrayOfUserData[i].Username });
vis.append("line")
.attr("x1", 0)
.attr("x2", width - x({x: .1}))
.attr("y1", height)
.attr("y2", height);
});
function transitionGroup() {
var group = d3.selectAll("#chart");
group.select("#group")
.attr("class", "first active");
group.select("#stack")
.attr("class", "last");
group.selectAll("g.layer rect")
.transition()
.duration(500)
.delay(function(d, i) { return (i % numCases) * 10; })
.attr("x", function(d, i) { return x({x: .9 * ~~(i / numCases) / numLayers}); })
.attr("width", x({x: .9 / numLayers}))
.each("end", transitionEnd);
console.log("group",group);
function transitionEnd() {
d3.select(this)
.transition()
.duration(500)
.attr("y", function(d) { return height - y2(d); })
.attr("height", y2);
}
}
function transitionStack() {
var stack = d3.select("#chart");
stack.select("#group")
.attr("class", "first");
stack.select("#stack")
.attr("class", "last active");
stack.selectAll("g.layer rect")
.transition()
.duration(500)
.delay(function(d, i) { return (i % numCases) * 10; })
.attr("y", y1)
.attr("height", function(d) { return y0(d) - y1(d); }) //return y0(d) - y1(d)
.each("end", transitionEnd);
function transitionEnd() {
d3.select(this)
.transition()
.duration(500)
.attr("x", 0)
.attr("width", x({x: .9}));
}
}
Are you sure that the data you're generating with "create_funf_layers(...)" is in the right format? 您确定使用“ create_funf_layers(...)”生成的数据格式正确吗?
It needs to look like this: 它需要看起来像这样:
var barArray = [
[
{ "x": 0, "y": 9},
{ "x": 1, "y": 29},
{ "x": 2, "y": 29},
{ "x": 3, "y": 29},
{ "x": 4, "y": 29}
],
[
{ "x": 0, "y": 19},
{ "x": 1, "y": 49},
{ "x": 2, "y": 29},
{ "x": 3, "y": 29},
{ "x": 4, "y": 29}
],
[
{ "x": 0, "y": 19},
{ "x": 1, "y": 49},
{ "x": 2, "y": 29},
{ "x": 3, "y": 29},
{ "x": 4, "y": 29}
],
[
{ "x": 0, "y": 19},
{ "x": 1, "y": 49},
{ "x": 2, "y": 29},
{ "x": 3, "y": 29},
{ "x": 4, "y": 29}
],
[
{ "x": 0, "y": 19},
{ "x": 1, "y": 49},
{ "x": 2, "y": 29},
{ "x": 3, "y": 29},
{ "x": 4, "y": 29}
]
];
And the data then be assigned like this: 然后按以下方式分配数据:
data = d3.layout.stack()(barArray)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.