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

Question

看d3 showreel(http://bl.ocks.org/mbostock/1256572)，过渡非常流畅漂亮。我正在尝试模仿这种风格以在散点图和条形图之间进行转换。

我可以这样做：

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

plot_bar_graph();

删除散点图然后绘制条形图，但我真的很想要某种动画，其中圆圈 "turn into" 矩形元素，但我不确定如何执行此操作。

我目前的想法是把散点图中的圆圈画成矩形，但是给它们一个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

如果您有兴趣了解补间，可以在此处查看超级公式的极端示例（其中包括类似矩形和圆形的形式）：

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