Циклический переход в D3 версии 4 и 5 - PullRequest
Новая
       9

Циклический переход в D3 версии 4 и 5

0 голосов
/ 07 мая 2018

Пример ответа, который был дан здесь , отлично работает с D3 версии 3, но в версии 4/5 .each был изменен на .on, и пример больше не работает, даже если изменяется.each до .on.Есть ли что-то еще, что нужно учитывать?Вот скрипка и код с D3 версии 4: jsfiddle 

var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500);

// code, code, code, irrelevant code...

function timeForTimeline(){ // har
    var timeline = svg.append("line")
        .attr("stroke", "steelblue");
    repeat();

    function repeat() {
    timeline.attr({
        'x1': 0,
        'y1': 130,
        'x2': 168,
        'y2': 130
    })
    .transition()
    .duration(4000)
    .ease("linear")
    .attr({
        'x1': 0,
        'y1': 430,
        'x2': 168,
        'y2': 430   
    })
    .each("end", repeat);
};
};



timeForTimeline();

1 Ответ

0 голосов
/ 07 мая 2018

d3v4 отошел от использования литералов объектов (т. Е. {}) для установки атрибутов (а также классов и стилей). Вы можете добавить поддержку назад для установки атрибутов и стилей, включив d3-selection-multi (https://d3js.org/d3-selection-multi.v1.min.js), и вызывая .attrs вместо .attr. В качестве альтернативы вы можете просто использовать несколько .attr.

Кроме того, .ease() теперь принимает функцию замедления вместо строки. Для удобства d3v4 включает в себя множество функций замедления (доступно для просмотра https://github.com/d3/d3-ease).. Вы можете вызывать его через что-то вроде selection . ease (d3.easeLinear).

Обновленная скрипка: http://jsfiddle.net/wqptuews/

...