データを取得して、このテンプレートに基づいて次のグラフを作成する JSON コールバック関数を実装しました: http://mbostock.github.com/d3/ex/stack.html。問題は、関数 transitionGroup(); を呼び出すときに、ブラウザーに必要な特定の情報を遮断していることだと思います。このコードが生成するエラーは、基本的に、各バーの幅や、軸に沿って配置する必要がある x 値を見つけることができないということです。どんな助けでも大歓迎です！
ありがとう
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}));
}
}