d3, перевод диаграммы рассеяния в гистограмму

Question

Глядя на шоу d3 (http://bl.ocks.org/mbostock/1256572), переходы очень гладкие и красивые. Я пытаюсь подражать этому стилю для перехода между диаграммой рассеяния и гистограммой.

я могу сделать что-то вроде этого:

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

plot_bar_graph(); 

который удаляет диаграмму рассеяния, а затем участки гистограмму, но я действительно хотел бы своего рода анимации, где круги «превращаются в» прямоугольник элементов, но я не уверен, как это сделать.

Моя нынешняя идея состоит в том, чтобы просто нарисовать круги в рассеянном ящике как прямоугольники, но придать им атрибут rx и ry, чтобы они выглядели как круги, а затем сменили их на прямоугольники.

Что-то вроде этого:

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

, но это кажется довольно громоздким.

Answer 1

Это единственный способ сделать это, за исключением написания собственного твина и рисования с элементами пути (что намного сложнее). Это сложнее настроить, потому что прямоугольники рисуют сверху и слева, а не в центре, как круги, но он будет работать.

Подростков трудно, но не невозможно: https://github.com/mbostock/d3/wiki/Transitions#attrTween

Если вы заинтересованы в получении в промежуточных кадров, вы можете увидеть яркий пример здесь с Superformula (который включает в себя прямоугольник, как и круг подобных форм):

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