0
私は積み上げ棒グラフを使用して1つのチャートでうまく動作する遷移を持つグループ化棒グラフ関数を作成します。最初のグラフは遷移しませんし、2番目のグラフは正常に動作します。私はこれが関数内の遷移に関係していると考えているので、最後に作成されたチャートに対してのみ実行されます。グループ化された棒グラフにグループ化棒グラフへのチャートの移行が動作しない
これについての助力は素晴らしいでしょう！
function createChartDate(inputdata, chartname, inputtop, inputbottom, inputwidth, inputheight, inputleft, inputright, bargap, yaxisShift) {
var stack = d3.layout.stack(),
layers = inputdata,
m = layers[0].length, // number of samples per layer
n = layers.length, // number of layers
data = stack(d3.range(n).map(function(d) {
return layers[d];
}));
var yGroupMax = d3.max(data, function(layer) {
return d3.max(layer, function(d) {
return d.y;
});
}),
yStackMax = d3.max(data, function(layer) {
return d3.max(layer, function(d) {
return d.y0 + d.y;
});
});
var margin = {
top: inputtop,
right: inputright,
bottom: inputbottom,
left: inputleft
},
width = inputwidth - margin.left - margin.right,
height = inputheight - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], (Number(bargap)/100));
var xTime = d3.time.scale()
.domain([new Date(inputdata[0][0].x), d3.time.day.offset(new Date(inputdata[0][inputdata[0].length - 1].x), 1)])
.rangeRound([0, width - margin.left - margin.right]);
var xAxisTime = d3.svg.axis()
.scale(xTime)
.orient('bottom')
.ticks(d3.time.day, 1)
.tickFormat(d3.time.format('%x'))
.tickSize(0)
.tickPadding(8);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(2)
.tickPadding(6)
.outerTickSize(0);
var svg = d3.select(chartname).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 layer = svg.selectAll(".layer")
.data(data)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return color(i);
});
var rect = layer.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("x", function(d) {
return xTime(d.x);
})
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0)
var allrect = layer.selectAll('rect')
.style("cursor","pointer")
.append("svg:title")
.text(function(d){return d.y;})
rect.transition()
.delay(function(d, i) {
return i * 10;
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisTime)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
svg.append("g")
.attr("class", "yaxis")
.attr("transform", "translate(" + (Number(margin.left) - yaxisShift) + ",0)")
.call(yAxis);
svg.select("g.yaxis").selectAll(".tick")
.each(function(d) {
if (d === 0) {
this.remove();
}
});
var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect")
allchart.on('mouseover', function(d){
d3.select(this).style("opacity","0.8")
})
.on('mouseout', function(d){
d3.select(this).style("opacity","1")
});
d3.selectAll("input").on("change", change);
/* var timeout = setTimeout(function() {
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
d3.select("input[value=\"0\"]").property("checked", true).each(change);
}, 2000); */
function change() {
//clearTimeout(timeout);
if (this.value === "grouped") transitionGrouped();
if (this.value === "stacked") transitionStacked();
//else transitionStacked();
}
function transitionGrouped() {
y.domain([0, yGroupMax]);
var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect"),
axistran = d3.selectAll("svg");
allchart.transition()
.ease("linear")
.duration(300)
.delay(function(d, i) {
return i * 10;
})
.attr("x", function(d, i, j) {
return xTime(d.x) + x.rangeBand()/n * j;
})
.attr("width", x.rangeBand()/n)
.transition()
.duration(200)
.ease("linear")
.attr("y", function(d) {
return y(d.y);
})
.attr("height", function(d) {
return height - y(d.y);
});
axistran.select("g.yaxis").transition()
.duration(600)
.call(yAxis);
axistran.select("g.yaxis").selectAll(".tick")
.each(function(d) {
if (d === 0) {
this.remove();
}
});
};
function transitionStacked() {
y.domain([0, yStackMax]);
var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect"),
axistran = d3.selectAll("svg");
allchart.transition()
.ease("linear")
.duration(300)
.delay(function(d, i) {
return i * 10;
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
})
.transition()
.duration(200)
.ease("linear")
.attr("x", function(d) {
return xTime(d.x);
})
.attr("width", x.rangeBand());
axistran.select("g.yaxis").transition()
.duration(600)
.call(yAxis);
axistran.select("g.yaxis").selectAll(".tick")
.each(function(d) {
if (d === 0) {
this.remove();
}
});
};
};
あなた 'createChartDate'機能は、複数の変数（および他の機能）をラップしているので、あなたのチャートは、互いに独立していません。最後のものだけが 'var allchart = d3.select（chartname）...'のために遷移し、chartnameは値 "＃chart2" 'を保持します。 – Mark
各チャートに対して関数を作成することができない場合、それらを互いに独立させるにはどうすればよいですか。 –