【问题标题】:d3 tree separate tree layout and annotationd3 tree 分离树布局和注解
【发布时间】:2013-08-31 22:08:25
【问题描述】:

我想显示一个 d3 树,例如屏幕左侧(tree_panel)和右侧每个叶子的注释(annotation_panel)。

问题是叶子注解可以变得相当大。 因此,我可以将 tree_panel+annotation_panel 放入一个 div 并使其溢出:滚动。 然后,每当我向右滚动很多时,树就不再可见了。

有没有办法将树和注释分开,只在注释区域滚动?

为了方便起见,我制作了以下图片:http://oi43.tinypic.com/2ihscpc.jpg

非常感谢任何指点/帮助!

法比安

【问题讨论】:

    标签: tree d3.js treeview


    【解决方案1】:

    您可以为树和注释(并排放置)使用单独的 div,而 overflow: scroll 仅设置在注释 div 上吗?

    【讨论】:

    • 可能。然后我想我必须每个 div 有一个 SVG。只有一个 SVG 的好处是注释被分配给单个叶子。因此,如果您折叠内部节点,所有子节点及其所有注释都将被隐藏。我想当有两个 SVG 时我会失去那个链接。也就是说:在绘制两个div的时候,如何保证注解与对应的叶子节点的x坐标相同?
    • SVG 中的所有坐标都是相对于左上角的,因此只要两个 SVG 的大小相同并且正确对齐,您应该能够在两个 SVG 中使用相同的坐标。另一种方法是使用带有剪切路径的 SVG,然后将事件处理程序连接到滚动事件,以便您可以相对于滚动条转换注释 ,但这对我来说听起来更难。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-20
    • 1970-01-01
    • 2016-04-11
    • 2012-12-02
    • 2013-03-02
    • 2012-09-17
    相关资源
    最近更新 更多