d3 js可扩展和可折叠树结构

Question

我正在尝试生成可扩展且可折叠的水平树结构，以显示某些组的执行时间。

这是我的数据结构

组别1    - Artifact1          - 所用的时间    - Artifact2           - 执行时间   。   。   。 第2组    - Artifact3          - 所用的时间    - 神器4          - 所用的时间   。   。   

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

我正在研究这个例子：https://github.com/lbrucher/d3-tree-heatmap：

这个例子的问题是，当我有更多的组时，页面疯狂地扩展，框内的标签消失。此外，我有大约30组，所以想要每行显示4或5个盒子

有些人可以帮助我就这个问题提供一些想法

Answer 1

也许你可以创建你想要的树的两个图表：

• 可以清楚地显示所有标签，但不适合屏幕（宽度远大于屏幕宽度）：

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

然后您允许用户向下滚动第二个图表，类似于此example :(当然，在您的情况下，图表看起来会有所不同）

---