将列表显示为二叉树答案

【问题标题】：Display a list as binary tree将列表显示为二叉树
【发布时间】：2016-01-15 21:27:04
【问题描述】：

我想画一棵二叉树，但我找不到任何正确的 javascript 插件。我在谷歌上搜索了很多 javascript 插件，但找不到任何可以帮助我的插件，而且我发现的插件没有很多文档。

我检索二叉树，其中每条记录都知道它的父级是谁以及它们在哪一侧。该数据被编码为 json 并发送回 ajax 调用。我想在这个数据上绘制二进制文件。谁能告诉我任何可以帮助我做到这一点的插件

id |user_id| parent_id |side |depth |created_at |更新时间

我的数据以 json 格式返回。现在在这个我有他们所在的侧面，并且父ID告诉它哪个用户是它的父。现在数据以 json 形式返回，它有一个数组，每个索引都有一个对象，格式为我在块引号中给出的格式。现在我想要一个 jquery 库，它接受用户 id 来确定在其中显示为文本的内容，以及他们是否有一个父级，其父级是父级以及它们在哪一侧

【问题讨论】：

Draw a binary tree的可能重复
您可以发布您的数据吗？您希望它们如何显示？到目前为止你做了什么？
@Aᴍɪʀ 我已经更新了问题
恕我直言，这是一个很好的问题。但我认为没有通用的二叉树可视化器，因为它们的叶子数量增长非常快。所以实现很大程度上取决于树的深度。例如。 thecodeplayer.com/walkthrough/… - 如您所见，没有任何与叶子相关的数据的位置。 :)
@f_martinezn 看起来我找到了这样的实现。这是谷歌组织结构图。它们很容易实现。他们的一个缺点是如果节点只有一个孩子，那么它不会显示在左边或右边

标签： javascript binary-tree

【解决方案1】：

我找到了制作这种二叉树的解决方案。任何阅读此答案的人都可以使用 Google 组织结构图，这里是链接 Google Organization Chart

$(document).ready(function(){
            google.charts.load('current', {packages:["orgchart"]});
            google.charts.setOnLoadCallback(drawChart);
             function drawChart() {

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'id');
                data.addColumn('string', 'Manager');
                data.addColumn('string', 'toolTip');

                data.addRows([
                    <?php foreach($data as $values): ?>

                        [value, parent, ""],
                    <?php endforeach; ?>
                ]);
                // Create the chart.

                var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                chart.draw(data, {allowHtml:true});
            }
        });

最后一件事当你尝试打印时，因为我使用的是 php，我遇到了一个错误，即 root 父级没有子级，所以它没有打印任何东西，所以对于所有 php 开发人员，你可以在 parent 参数中执行此操作

"<?php echo isset($values['something']) ? $values['something'] : '';  ?>"

在我的情况下，最后一件事是字符串，所以我必须将值等用引号括起来

希望这个解决方案有所帮助

我忘记的一件事是只记得如果一个节点只有一个孩子，那么它不会显示在左边或右边，而是在一条直线上。据我所知，这是它唯一缺少的东西

【讨论】：