javascript - 用d3js实现复杂的Processing pushMatrix/popMatrix逻辑

Question

我想用 d3js 重新实现以下处理草图。

Recursion Thing

这个精彩的草图使用复杂的 pushMatrix、popMatrix 层次结构递归地构建图形。

这怎么能在 d3.js 中实现，因为我们总是在附加形状或转换时立即在 DOM 上工作。但是在这个草图中的逻辑中，附加部分似乎必须被阻止以等待相应的 popMatrix 出现。感觉我必须实现自己的变换和形状堆栈，以临时记住要添加的变换和形状，直到 popMatrix 出现，但这似乎不是 d3.js。

非常感谢任何建议

附言:我不想使用 processing.js，因为我想使用 svg，而不是 Canvas 。

Answer 1

有趣的问题!这是我的看法:http://jsfiddle.net/Y48BL/

这更像是一个概念验证；我没有做所有不同的颜色等等。然而，它展示了一般方法。一般的想法是使用 g 元素而不是处理使用的矩阵。两者都用于坐标系的局部变换；在 g 元素的情况下，通过相应地设置 transform 。新的 g(矩阵)在递归函数内部创建，然后传递到递归的下一层。这对应于 pushMatrix()。回来，我们继续使用原来的g，对应于popMatrix()。

圆和线图的翻译相当简单——我发现 D3 代码更容易阅读。