d3 js 可扩展可折叠的树形结构

Question

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

这是我的数据结构

组 1 - 神器1 - 用的时间 - 神器2 - 执行时间 . . . 第 2 组 - 神器3 - 用的时间 - 神器4 - 用的时间 . . .

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

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

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

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

Answer 1

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

• 清晰显示所有标签，但不适合屏幕（其宽度远大于屏幕宽度）：

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

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

---