d3，将散点图转换为条形图

Question

观看d3 showreel（http://bl.ocks.org/mbostock/1256572），过渡非常流畅而美丽。我试图模仿这种风格来在散点图和条形图之间转换。

我可以这样做：

svg.selectAll(".dot")
  .transition()
  .duration(duration)
  .delay(delay)
  .remove();

plot_bar_graph();

删除散点图，然后绘制条形图，但我真的很喜欢某种类型的动画，其中圆圈变成＆＃34;矩形元素，但我不知道如何做到这一点。

我目前的想法是将散点图中的圆圈绘制为矩形，但是给它们一个rx和ry属性，使它们看起来像圆圈，然后将它们更改为矩形。

这样的事情：

d3.select(".bar")
   .transition()
   .duration(duration)
   .delay(delay)
   .attr("rx",0)
   .attr("ry",0); 

但这似乎相当笨拙。

Answer 1

这是你能做到的唯一方法，除了编写你自己的补间和绘制路径元素（这要困难得多）。它设置起来比较困难，因为矩形从左上角而不是像圆圈一样从中心绘制，但它会起作用。

Tweens很难但并非不可能： https://github.com/mbostock/d3/wiki/Transitions#attrTween

如果你有兴趣进入补间，你可以在这里看到一个极端的例子：Superformula（包括类似矩形和圆形的形式）：

http://bl.ocks.org/mbostock/1020902