Моя рекурсивная функция слишком быстра, чтобы оживлять пути - PullRequest
Новая
       11

Моя рекурсивная функция слишком быстра, чтобы оживлять пути

0 голосов
/ 03 июня 2019

Я визуализирую путешествия на карте с путем 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 и неожиданно обнаружил, что ушел из глубины.

...