D3版本4和5中的循环过渡 [英] Looping transition in D3 version 4 and 5

问题描述

在此处给出的示例答案适用于D3版本3，但在版本3 4/5 .each更改为.on，即使将.each更改为.on，该示例也不再起作用.还有什么需要考虑的吗?这是D3版本4的小提琴和代码: jsfiddle

The example answer which was given here works fine with D3 version 3, but in version 4/5 .each was changed to .on and the example doesn't work anymore, even if changing .each to .on. Is there anything else which have to be considered? Here is the fiddle and the code with D3 version 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();

推荐答案

d3v4不再使用对象文字(即{})来设置属性(以及类和样式).您可以通过添加d3-selection-multi( https://d3js.org/d3-selection-multi.v1.min.js )，然后调用.attrs而不是.attr.或者，您可以只使用多个.attr.

d3v4 moved away from using object literals (i.e. {}) to set attributes (and classes and styles). You can add support back for setting attributes and styles by including d3-selection-multi (https://d3js.org/d3-selection-multi.v1.min.js), and calling .attrs instead of .attr. Alternatively you can just use multiple .attr.

此外，.ease()现在采用了缓动功能而不是字符串.为了方便起见，d3v4包含了一系列缓动功能(可在 https://github.com/d3/d3上查看-ease ).您可以通过选择之类的东西来调用它.轻松(d3.easeLinear).

Also, .ease() now takes an easing function instead of a string. For convenience, d3v4 includes a slew of easing functions (viewable at https://github.com/d3/d3-ease). You'd invoke it via something like selection.ease(d3.easeLinear).

更新的提琴: http://jsfiddle.net/wqptuews/

这篇关于D3版本4和5中的循环过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！