d3 js可展开和可折叠的树形结构

Question

我正在尝试生成可展开和可折叠的水平树形结构来显示某些组的执行时间。

这里是我的数据

组别1 的结构 - 采取 时间 - - Artifact1 Artifact2 - 执行 所用的时间。 。 。 组2 - 神器3 - 花费的时间 - 神器4 - 花费的时间 。 。 。

理想情况下，我希望将所有组显示为矩形，并且当用户单击一个矩形（组）时，它应该展开所有工件。

我期待到这个例子：https://github.com/lbrucher/d3-tree-heatmap：

这个例子的问题是，当我有更多的组，页面疯狂扩张和内部标签盒消失。此外，我有大约30组这样想显示每行4或5盒

一些能帮助我在这个问题上

Answer 1

也许你可以创建一个你想要的树的两个图提供了一些建议：

• 一个清楚显示的所有标签，但不适合在屏幕（其宽度比屏幕的宽度更大的）：

• 另一个适合在屏幕上，但不显示标签。

然后你允许用户向下滚动第二个图中，类似这样的example：（ofcourse，你的情况，图表会另眼相看）

---