如何在D3 Zoomable Icicle Layout中绘制缩略图作为子项？

Question

我需要使用D3 Zoomable Icicle示例（http://bl.ocks.org/mbostock/1005873）来查看文件层次结构。

我希望有缩略图可视化“叶子节点”或“文件”。

我不确定使用该示例是否可行，然后如果是，如何在此布局中对文件夹和文件进行不同的可视化？我不知道如何尝试这个。

感谢。

Answer 1

如果您将节点实现为<g>元素，则可以使用.each()调用添加矩形或<image>元素，并根据数据设置其大小。

但是，如果分区布局中有许多叶节点，则分区往往会变得非常窄，因此图像的大小可能会非常小。我从你的模型中看到你希望在多行网格中平铺缩略图。您将需要创建一些自定义布局代码，用于标识给定父文件夹中的所有文件（叶节点）并计算它们共同占用的水平空间量，然后将缩略图位置分配到网格中不会更宽比那个空间。

您还需要确保您的分区布局正在对分区进行排序，以便所有叶子在一起，与任何子文件夹分开。我认为默认排序应该以这种方式工作，但这是要记住的事情。

要使更新和布局代码简单明了，在计算这些树叶的新位置后，请务必保存x，y，dx（宽度）和{{各个数据对象中的1}}（高度）值，覆盖分区布局创建的位置和大小。