Loops 多边形顶点的循环D3动画

假设我有一个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");

（部分由……提供）

我希望三角形的顶点能够不断地改变其y位置（例如，存储在我的Yvertex变量中），循环遍历数据集中的值

现在，我将作为一个数据传递给linedata[value]var来写入三角形，因此最终我得到一个三角形，它的顶点位于数据集中最后一个值的位置上。我假设——但我可能错了——dom会立即在我的所有值之间循环，并在最后停止。那么，有没有一种方法可以告诉D3从数据集中的第一个值开始，缓慢到最后一个值，然后从最后一个值返回到第一个值，并循环转换所需的时间

---

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

创建这种行为肯定有更简单的方法，尤其是对于三角形

但是，如果您希望按照设置本示例的方式在路径数据中循环转换，则需要类似于以下内容的内容在lineData数组中的每个元素中循环并相应地更新路径：

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

此选项设置为每次单击svgContainer时循环浏览数据。有关工作示例，请参见此处：

编辑：这是一个替代版本，负载时每500毫秒循环一次：

---

我现在理解了函数的工作方式，谢谢Greg！但是有没有一种方法可以让它不点击就循环？我基本上希望多边形的形状不断变化。我试着将它设置为“加载”，但id似乎不起作用。。。再次感谢你！也许是这样的<代码>变量idx=0；var cycle=function（）{lineGraph.transition（）.attr（'d'，lineFunction（lineData[idx]）idx++；if（idx>=dataset.length）idx=0；}setInterval（cycle，500）请参阅此处的更新版本：如果有帮助，请接受答案：）太棒了！帮了大忙，格雷格。

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

setInterval(cycle, 500)