D3: Переход между многоугольниками

Question

Here - это проект D3, над которым я работаю. Он обновляет форму правильного многоугольника от n до n-1 или n + 1 углов. Нажатие кнопок a, b, c, d или e вызовет это. Я последовал за учебником по general update patterns и попытался следовать шаблонам во многих других образцах, которые я нашел, в первую очередь bl.ocks.org/mbostock/3081153.

Вот функция рисования

function draw(data) { 

var v = vis.selectAll("polygon") 
    .data(data, function(d) { return d; }); 

// enter selection 
v.enter().append("polygon"); 

// update selection 
v.attr("class", "update") 
    .transition() 
    .duration(750) 
    .attr("points",function(d) { 
    return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");}) 
    .attr("stroke","black") 
    .attr("stroke-width",2); 

// exit selection 
v.exit().attr("class", "exit") 
.transition() 
    .duration(750).remove(); 
}; 

И функция обновления

function update() { 
if (this.classList.contains('on')) { 
    d3.select(this).classed('on',false) 
    letters.pop(this.id); 
} 
else { 
    d3.select(this).classed('on',true) 
    letters.push(this.id); 
} 
var N = letters.length; 
draw([poly(N,N,[])]); 
}; 

Мой вопрос заключается в том, как и куда звонить интерполяцию, чтобы сделать это идти плавно от одного многоугольника к другому?

Thanks

Answer 1

Спасибо Ларсу за то, что рассмотрел мой вопрос. Я так много разобрался, но не знал, где это произойдет. Я думаю, что проблема заключалась в том, что я создавал новые полигоны вместо того, чтобы менять старые (что и происходит в примере обновления, старом и новом) , Большинство людей ссылаются на пример California-> circle, но this one действительно помогли гораздо больше с меньшим количеством кода.

Объединив то, что у меня было до этого примера, я получил this. Функция обновления теперь составляет

function update() { 
if (this.classList.contains('on')) { 
    d3.select(this).classed('on',false) 
    letters.pop(this.id); 
} 
else { 
    d3.select(this).classed('on',true) 
    letters.push(this.id); 
} 
var N = letters.length; 
d3.select(".big").transition().duration(500).attr("points", mapPoints(poly(N,N,[])));}; 

Очевидно, что с этим связано много недостатков, но я доволен анимацией.