动画排序堆积条形图d3.js [英] Animated sort stacked bar chart d3.js
本文介绍了动画排序堆积条形图d3.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想为此图表中的堆积条形图制作动画,其参数如< a href = http://bl.ocks.org/mbostock/3885705 rel = nofollow>此图表
I want to animate a sort of stacked bar chart from this chart with params like in this chart
我很成功地进行了排序x轴,但我没有成功移动堆积的条形。
I well succeed to sort x axis, but I didn't succeed to move stacked bars.
这是我的代码:
- HTML
<button id="test">
Sort values
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
- CSS
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
- JAVASCRIPT
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().rangeRound([height, 0]);
var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".2s"));
var svg = d3.select("body").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 + ")");
d3.csv("data.tsv", function(error, data) {
if (error)
throw error;
color.domain(d3.keys(data[0]).filter(function(key) {
return key !== "State";
}));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) {
return {
name: name,
y0: y0,
y1: y0 += +d[name]
};
});
d.total = d.ages[d.ages.length - 1].y1;
});
//
x.domain(data.map(function(d) {
return d.State;
}));
y.domain([0, d3.max(data, function(d) {
return d.total;
})]);
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text("Population");
var state = svg.selectAll(".state").data(data).enter().append("g").attr("class", "g").attr("transform", function(d) {
return "translate(" + x(d.State) + ",0)";
});
state.selectAll("rect").data(function(d) {
return d.ages;
}).enter().append("rect").attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.y1);
}).attr("height", function(d) {
return y(d.y0) - y(d.y1);
}).style("fill", function(d) {
return color(d.name);
});
var legend = svg.selectAll(".legend").data(color.domain().slice().reverse()).enter().append("g").attr("class", "legend").attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("rect").attr("x", width - 18).attr("width", 18).attr("height", 18).style("fill", color);
legend.append("text").attr("x", width - 24).attr("y", 9).attr("dy", ".35em").style("text-anchor", "end").text(function(d) {
return d;
});
d3.select("#test").on("click", change);
function change() {
data.sort(function(a, b) {
return b.total - a.total;
});
x.domain(data.map(function(d) {
return d.State;
}));
y.domain([0, d3.max(data, function(d) {
return d.total;
})]);
var transition = svg.transition().duration(750),
delay = function(d, i) {
return i * 50;
};
//problem seems coming from here
transition.selectAll("g.rect").delay(delay).attr("width", x.rangeBand()).attr("y", function(d) {
return y(d.y1);
}).attr("height", function(d) {
return y(d.y0) - y(d.y1);
});
//x axis is sorted
transition.select(".x.axis").call(xAxis).selectAll("g").delay(delay);
}
});
感谢您的帮助
推荐答案
可以这样做。给持有整个堆栈的g组一个类:
This can be done like this. Giving a class to the g group which holds the full stack:
//Now each g which holds a stack has a class for selection.
var state = svg.selectAll(".state").data(data).enter().append("g").attr("class", "g").attr("transform", function (d) {
return "translate(" + x(d.State) + ",0)";
}).attr("id", function (d) {
return d.State;
}).attr("class", "stack");
然后在更改选择时触发的更改代码中进行如下转换:
And then in the change code which triggers on change of the select do transition like this:
//translate the stack post sorting.
transition.selectAll(".stack")
.delay(delay)
.attr("transform", function (d) {
return "translate(" + x0(d.State) + ",0)";
});
我在代码中添加了注释,供您了解演示。
I have added comments in code for you to understand the demo.
完整工作的小提琴此处。
这篇关于动画排序堆积条形图d3.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文