Переходить в d3, только если следующее значение отличается от предыдущего значения? - PullRequest
0 голосов
/ 18 апреля 2020

Я экспериментирую с интеграцией d3 и Leaflet и создал timelapse / map. Как вы можете видеть в этом видео , текст переходит с каждым новым назначением данных, что затрудняет чтение при длительных периодах одного и того же года (например, 1969). Есть ли способ избежать переходов, если следующее значение совпадает с предыдущим?

Вот соответствующий код:

var timer= svg2.selectAll(".text")
                .data(json.features.sort(function(a,b) { return parseTime(a.properties.date_cleaned) - parseTime(b.properties.date_cleaned); }))
                .enter().append("text")
                .transition().delay(function (d, i) {return speed*i;})
                .attr("x", 80)             
                .attr("y", 20)
                .attr("class", "timer")
                .style("font-size", "20px") 
                .style("opacity", 1)
                .text(function (d) { return d3.timeFormat("%Y")(parseTime(d.properties.date_cleaned));})
                .transition().duration(speed*0.5).style("opacity", 0)

Другой вариант - свернуть точки данных по годам, но я все же хочу, чтобы каждая точка отображалась отдельно на карте. Я теоретически мог бы сделать это, но более идеальным решением было бы только изменить линию (и) перехода, чем реструктурировать набор данных и весь другой рабочий код.

...