如何在已经有另一个的d3中添加转换

Question

我正在尝试在条形图中添加已经有另一个转换的排序转换，但是在单击复选框时应该应用排序转换。如果我删除第一个只是条形动画可视化的转换，那么排序成功，为什么？希望你能帮帮我。

以下是代码：

var graph= svg.selectAll(".bar")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("class","bar");

graph.append("svg:title")
           .text(function(d){
              return d["Regione"]+", "+d["2013"]; 
       });

var barchart= graph.attr("x",function(d){
               return xScale(d["Regione"]);
        })
           .attr("width",xScale.rangeBand())
           .attr("y",function(d){
               //return yScale(+d["2013"]);
               return height;
        })
           .transition().delay(function (d,i){ return i * 300;})
           .duration(300)
           .attr("height",function(d){
                return height-yScale(+d["2013"]);
        })
          .attr("y", function(d) { return  yScale(d["2013"]) ; });

       /************ sorting************/
 d3.select("input").on("change", change);

var sortTimeout = setTimeout(function() {
                   d3.select("input").property("checked", true).each(change);
                  }, 200);

  function change() {
    clearTimeout(sortTimeout);

    var x0 = xScale.domain(data.sort(this.checked
        ? function(a, b) { return b["2013"] - a["2013"]; }
        : function(a, b) { return d3.ascending(a["Regione"], b["Regione"]); })
        .map(function(d) { return d["Regione"]; }))
        .copy();

    var transition = svg.transition().duration(1050),
        delay = function(d, i) { return i * 50; };

    transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d["Regione"]); });

    transition.select(".x.axis")
        .call(xAxis)
        .selectAll("g")
        .delay(delay)
        .selectAll("text")
        //.style("text-anchor", "end")
        .attr("transform", "translate(0," + height + ")");

 }

如果我不应用第一次转换，排序效果很好，我无法弄清楚问题。提前致谢！ this is the csv file

感谢