Question

假设我有这个d3多边形：

var dataset = [100, 70, 50, 90, 110, 20]

//data for my line
var lineData = [];

for (var value in dataset){
lineData.push(  [{ "x": 0,   "y":200 },  { "x": 60,  "y": 200},
                { "x": 30,  "y": dataset[value]}]
                );
}



//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData[value]))
                            .attr("fill", "teal")
                            .attr("opacity", "0.2");

（部分由https://www.dashingd3js.com/svg-paths-and-d3js提供）

我喜欢我的三角形的顶点以继续改变它的y位置（例如存储在我的Yvertex var中），通过我的数据集中的值循环。

现在我作为数据传递给linedata [value] var写三角形，所以最后我得到一个三角形，顶点位于数据集中最后一个值的位置。我认为 - 但我可能错了 - dom立刻在我的价值观之间循环，并在最后停止。那么是否有一种方法可以告诉D3从第一个值开始的时间是从数据集开始慢到最后一个值，然后从最后一个值返回到第一个并循环过渡？

我希望尽可能清楚，我期待着你的帮助！

Answer 1

创建此行为肯定更简单，特别是对于三角形。

但是如果你想要一个通用的方法来转换循环遍历路径数据给定你设置这个例子的方式，你需要像下面那样循环遍历lineData数组中的每个元素并相应地更新路径：

var idx = 0;
svgContainer.on('click', function() {
    lineGraph
        .transition()
        .attr('d', lineFunction(lineData[idx]))
    idx++;
    if(idx >= dataset.length) idx = 0;
});

这个设置为每次单击svgContainer时循环访问数据。请参阅此处以获取工作示例：http://tributary.io/inlet/9044406

编辑：这是一个替代版本，在加载时每隔500毫秒循环一次：http://tributary.io/inlet/9061336

var idx = 0;
var cycle = function(){
    lineGraph
        .transition()
        .attr('d', lineFunction(lineData[idx]))
    idx++;
    if(idx >= dataset.length) idx = 0;
}

setInterval(cycle, 500)

循环D3动画的多边形顶点

1 个答案: