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秒后自动启动,这样就没有重叠:)感谢您的支持!