Loop D3 анимация многоугольника вершины

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)

Я хотел бы вершину моего треугольника, чтобы при изменении его у позиции (например, хранится в моем Yvertex var), зацикливая значения в моем наборе данных.

Прямо сейчас я передаю данные, чтобы написать треугольник linedata [значение] var, поэтому в конце концов я получаю треугольник, имеющий вершину в позиции последнего значения в наборе данных. Я предполагаю, но я, вероятно, ошибаюсь, что дом мгновенно перемещается между моими значениями и останавливается в последний раз. Итак, есть ли способ сказать, что 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

EDIT: Это альтернативная версия, что циклы каждые 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)