D3 v4：无法正确对齐树状图

Question

我的工作示例可以在此gist找到，并与相应的bl.ock进行互动。但是，我建议检查原始（全尺寸）here，这说明了为什么有套索工具。

数据包含在文件index.html中，而且非常简单。它是热图的单元格列表（Object s）。

目前，大部分内容都按照草稿的预期运行，并且为了便于动态调整大小，还没有正确封装内容 - 尽管在此更新版本中已经对此进行了改进。

问题在于树状图。查看上述任何链接将显示我目前获得的内容。我想制作像树形成树或聚类分析一样的树状图。它们是扁平方形的。另外，我想将这些树形图放在标签旁边。例如，这样的事情会很好：

内置函数似乎会自动居中根并从那里扩展。这很好，但是使得树状图对齐与标签似乎是不可能的，除非我重新排序标签。而且，它不允许有两个没有根，这可能发生。

所以我很好奇人们如何做这件事，就像this例子一样，而不必重新编码热图方面。

我发现那里的代码看起来不容易理解，特别是缺少评论。

非常感谢你的帮助。

此图表的布局基于此草图

其中蓝色和橙色条只是元素之间的默认间距分隔符（以帮助我自己的可视化以了解如何翻译事物）并且按钮当前设置为0（因为还没有）

我也欢迎有关此示例的任何实现的反馈。这是我第一次在d3中使用套索工具，所以我认为它的工作非常好。

最后，如果有人能弄清楚为什么x轴标签和链接条形图的条形没有对齐，我会非常感激。我想这可能是由于自动渲染刻度线的方式而不考虑间距？