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

Javascript 如何在d3中添加已经有另一个转换的转换,javascript,d3.js,Javascript,D3.js,我试图在我的条形图中添加一个已经有另一个转换的排序转换,但是在单击复选框时应该应用排序转换。如果我删除第一个只是条的动画可视化的过渡,排序成功,为什么?希望你能帮助我 代码如下: var graph= svg.selectAll(".bar") .data(dataset) .enter() .append("rect") .attr("class","bar"); graph.append("svg:ti

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

代码如下:

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

 }
如果我不应用第一个转换,排序工作正常,我就无法解决问题。提前谢谢!


谢谢

你能把这个放到一个JSFIDLE中来帮助我们帮助你吗?实际上我不太习惯JSFIDLE:(我必须导入一个外部文件:/,如果我给你文件本身的话?谢谢!@canyon289这里是JSFIDLE,但是正如我说的,我不能导入我的csv文件@canyon289,也许我已经以一种残酷但有效的方式解决了这个问题;实际上,第一次转换持续了大约7/8秒,我让第二次转换在15秒后启动,所以如果我选中复选框,它就会被删除。)将提前启动,否则将在15秒后自动启动,这样就没有重叠:)感谢您的支持!