动画排序堆积条形图 d3.js

Question

I want to animate a sort of stacked bar chart from this chart with params like in this chart

I well succeed to sort x axis, but I didn't succeed to move stacked bars.

here is my code :

1. HTML

 <button id="test"> Sort values </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

2. 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; }

3. 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); } });

Thanks for helping

Answer 1

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.

Full working fiddle here .