我可以使用此数据可视化d3中的二叉树吗

时间:2019-07-30 20:16:21

标签: javascript python pandas dataframe d3.js

所以我有这个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>

    </style>
</head>
<body>
    <div id="treeDiv"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    var canvas = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .append("g")
          .attr("transform", "translate(50, 50)");

    var tree = d3.layout.tree()
        .size([400, 400]);

    var data = {{ data.chart_data | safe }}    

    console.log(data);

    </script>
</body>
</html

并在控制台中显示以下内容:

console output

我想使用this代码或this代码来可视化树木。 但是我无法以这种格式带来数据。那么,有没有办法以我现在的格式可视化树木? 第一棵树应如下所示: how the tree should look like

如果您想了解如何在python中传递数据:

tree_definitions = robjects.globalenv['treedefinitions']

df2 = tree_definitions.drop(['nodes', 'classes'], axis=1)

tree_data = df2.to_dict(orient='records')
tree_data = json.dumps(tree_data, indent=2)
data = {'chart_data': tree_data}
# return data
return render_template("index.html", data=data)

1 个答案:

答案 0 :(得分:-1)

您的树结构只是一个数组。没有迹象表明连接了两个节点。

您至少需要为树中的每个节点存储父级/子级,否则无法仅通过数组构建树。