【发布时间】：2016-07-07 22:39:06
【问题描述】：
我有一个堆叠条形图到分组条形图函数的转换，它适用于一个图表，但只要我添加第二个，它就会中断。第一个图表不会转换，第二个图表工作正常。我认为这与函数中的转换有关，因此它仅针对制作的最后一张图表运行。
在这方面有什么帮助会很棒！？
我为此 here 整理了一个 jsFiddle
我的功能如下：
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"。 -
除了为每个图表创建一个函数之外，我能做些什么来使它们相互独立。
标签： javascript d3.js charts transition