D3.JS将几何体从rect更改为path

大家好

我有一个关于D3.js的问题 基本上我想要实现的是形状的改变，如下所示。

但是,， 完成第一张图纸的编码后，坐标信息如下所示

d3.selectAll('body').select('svg').append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width',150)
.attr('height',150)
.attr('fill','none')
.attr('stroke-width',2)
.attr('stroke','black')

我试图在单击矩形时更改形状。 所以我做了一个点击事件。但是

我想要实现的平行四边形应该由“路径”组成。 如何在单击方形时更改方形形状。 因为我想为改变做“动画”， 简单地关闭正方形和平行四边形并不是我想要做的

有人能帮我吗？ 或者谁有更好的解决方案

---

提前谢谢。

您能否编辑问题以添加与动画尝试对应的代码？一个堆栈片段将非常适合于此。阅读：听起来你需要应用一个倾斜变换。你是否考虑过/尝试过使用Path而不是Rect，这样你以后就不必切换了？