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,[])]);
};

我的问题是如何以及在何处调用插值以使其从一个多边形平滑到下一个多边形？

由于

Answer 1

感谢Lars查看我的问题。我已经想到了这么多，但我不知道它会在哪里出现。我认为问题是我正在创建新的多边形而不是改变旧的多边形（这是在更新示例中发生的事情，旧的和新的在）。大多数人链接到加利福尼亚州＆gt;圆形示例，但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,[])));};

这显然还有很多缺点，但我对动画感到满意。

D3：多边形之间的过渡

1 个答案: