D3.JS将几何形状从矩形更改为路径

Question

Stackoverflow大家好，

我对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')

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

我要实现的平行四边形应该由“路径”组成。 单击正方形时如何更改正方形形状。 由于我想为变化做“动画”， 只需关闭正方形并打开平行四边形，这并不是我想要的。

能帮我吗？ 还是有人对此有更好的解决方案？

谢谢。