如何将 TreeModel 应用于元素？答案

【问题标题】：How do you apply a TreeModel to an element?如何将 TreeModel 应用于元素？
【发布时间】：2020-08-27 13:05:19
【问题描述】：

我正在使用库 TreeModel。它有很好的文档，除了它没有显示如何在 html 中实际显示树？有人知道吗？

我这样做是因为我正在练习构建二叉搜索树的数据结构，并且我想直观地看到我的代码是如何写出的。 TreeModel 似乎是最好的选择。

谢谢

【问题讨论】：

在 git 本身中询问不是更有意义吗？
TreeModel 实际上只是一个用于数据结构而非可视化的工具。您最好使用一些用于可视化的图形绘图库 - 即 cytoscape 等。您可以编写自己的 SVG/canvas 抽屉或将 HTML 元素映射到您的元素，但就像您说的那样，这似乎很乏味。
@Zed Uhh 我认为您可能不正确。 jnuno.com/tree-model-js 它清楚地显示了一个画布图。它假设建立一个画布树。您还可以使用动画。因此，要么您的权利和该网站具有误导性，要么您就是错的。
@Italy 我也在 git 上发过帖子。该网站实际上说要来这里提问。
@numerical25：这只是他们模型的演示。渲染不是库的一部分，这是用 d3 完成的。查看他们的 gh-pages 分支，他们的 main.js 没有 不是 TreeModel.js：github.com/joaonuno/tree-model-js/blob/gh-pages/js/main.js，TreeModel.js 是 included separately。

标签： javascript binary-search-tree treemodel

【解决方案1】：

HTML 文档本身就是一棵节点（元素）树。因此，如果您需要显示您的树，您应该使用 HTML 元素创建相同的树。

例如

var myTree = {
  title: 'Root',
  children: [
    {
      title: 'child-1',
    }, {
      title: 'child-2',
    }
  ]
};

相当于这样的：

<div class="node">
  <p>Root</p>
  <div class="nodes">
    <div class="node">
      <p>child-1</p>
    </div>
    <div class="node">
      <p>child-2</p>
    </div>
  </div>
</div>

【讨论】：

谢谢，这似乎有点乏味，但我会试一试。
是的，为什么没有文档显示这一点？另外，它出现在网站示例中，它使用画布绘制树而不是 html。为什么我必须使用 html 来设计结构并使用 javascript，而它最终只能使用画布？
您不必这样做。但是您询问了 HTML。 Canvas 元素完全是另一个世界，甚至可以渲染 3D。
是的，我宁愿用 Canvas 来做。我假设我可以做一个 getElementById 并将它附加到一个标签上，而画布只会在该标签内呈现。这就是我要问的。如何将 javascript 结构应用于 div。我想完全按照它在网站上的显示方式进行操作jnuno.com/tree-model-js
您提供的示例不使用画布。相反，它使用 SVG。但我真的不明白为什么认为画布或 SVG 会更容易实现。使用简单的 HTML 和简单的 CSS padding-left 您可以在几分钟内完成同样的事情。

【解决方案2】：

我找到了一个可行的解决方案。我所需要的只是为我的二叉树画出图表的东西。这很好用。我发布的应用程序并不是我想要的，但这很好用。

https://fperucic.github.io/treant-js/

【讨论】：