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

Question

我想为 this chart with params like in this chart

中的一种堆叠条形图制作动画

我很好地成功对 x 轴进行了排序，但是我没有成功移动堆积条。

这是我的代码：

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

});

感谢您的帮助

Answer 1

可以这样做。给持有全栈的g组一个class：

//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");

然后在更改 select 时触发的更改代码中执行如下转换：

//translate the stack post sorting.
    transition.selectAll(".stack")
        .delay(delay)
        .attr("transform", function (d) {

        return "translate(" + x0(d.State) + ",0)";
    });

我在代码中添加了注释，以便您了解演示。

全职工作 fiddle here.

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

Animated sort stacked bar chart d3.js

javascript

animation

transition

d3.js