我的递归函数太快,无法设置路径动画

时间:2019-06-03 14:57:25

标签: javascript d3.js transition

我正在用D3.js的路径可视化地图上的航程。我的数据在JSON文件中,格式如下:

[{"begin_date":1519,"trips":[[-13.821772,14.294839],[-9.517688,-7.958521],[0.598434,-34.704567],[18.374673,-86.850335]]},
{"begin_date":1549,"trips":[[12.821772,-16.294839],[5.517688,-20.958521],[13.598434,-54.704567],[18.374673,-86.850335]]},
{"begin_date":1549,"trips":[[12.821772,-16.294839],[5.517688,-20.958521],[13.598434,-54.704567],[18.374673,-86.850335]]}]

可以看出,有时一年有多次航程。以下递归函数有效:

d3.json("data/output.json", function(error, trips) {
            if (error) throw error

            var nest = d3.nest()
            .key(function(d){
                return d.begin_date;
            })
            .entries(trips)

            var trip = svg.selectAll(".voyage");

            // Add the year label; the value is set on transition.
            var label = svg.append("text")
                .attr("class", "year label")
                .attr("text-anchor", "end")
                .attr("y", height - 400)
                .attr("x", width+150)
                .text(function(d) {return d});

            var pnt = 0;

            doTransition();
            function doTransition() {
                trip.data(nest[pnt].values).enter()
                    .append("path")
                        .attr("class", "voyage")
                        .style("stroke", colorTrips)
                        .attr('d', function(d) {label.text(d.begin_date); return lineGen(d.trips.map(reversed).map(projection))})
                        .call(function transition(path) {
                            path.transition()
                                .duration(500)
                                .attrTween("stroke-dasharray", tweenDash)
                                .each("end", function(d) {
                                    d3.selectAll(".voyage")
                                        .remove()
                                        pnt++;
                                        if (pnt >= nest.length){return;}
                                        doTransition();
                                        })
                                    })
                                }

一些航海图应有的情节 voyage_success 但是,其中一些从未被绘制(我在日志中可以看到),尽管介于两者之间有数据点,但它从1545-1569年开始跳跃。我怀疑这是由于在过渡完成之前递归函数调用了自己。但是我也不确定。

希望这已经足够,我是D3.js的新手,突然发现自己陷入了困境。

0 个答案:

没有答案