tl;dr
如何制作Radial Tidy Tree使用 networkx 中的 JSON 树数据的
node_link_data(G[, attrs])
或tree_data(G, root[, attrs])
?如何制作D3 Cluster Dendrogram使用 networkx 中的 JSON 树数据的
node_link_data(G[, attrs])
或tree_data(G, root[, attrs])
?如何制作D3 Tidy Tree使用 networkx 中的 JSON 树数据的
node_link_data(G[, attrs])
或tree_data(G, root[, attrs])
?
示例不使用 JSON 格式,而是 CSV 样式的输入。
长版
你好,
我正在使用 Python 和 networkx 生成图形数据(主要是树状的)。我可以使用 their page 中提到的 networkx 函数将数据导出到 JSON :
node_link_data(G[, attrs])
: 以适合 JSON 序列化和在 Javascript 文档中使用的节点链接格式返回数据。adjacency_data(G[, attrs])
:以适合 JSON 序列化和在 Javascript 文档中使用的邻接格式返回数据。tree_data(G, root[, attrs])
: 以适合 JSON 序列化和在 Javascript 文档中使用的树格式返回数据。
networkx 的文档明确提到:
tree like in the d3.js example https://bl.ocks.org/mbostock/4063550
然而,linked example似乎没有使用 JSON 树格式,但使用了 csv
type of input .由于我的 javascript-skilz 基本上为零,我不明白如何让 Mike Bostock 的示例使用我拥有的 JSON 数据。你能帮忙吗?
示例 JSON
{
"issueid": "3295658",
"issuetype": "Portfolio-Epic",
"status": "In Progress",
"pirank": 24,
"id": "ATROB-2523",
"children": [
{
"issueid": "3288189",
"issuetype": "Epic",
"status": "Implementation",
"id": "ATTDATA-233",
"children": [
{
"issueid": "3305730",
"issuetype": "Task",
"status": "Implementation",
"id": "ATTDATA-363"
},
{
"issueid": "3305723",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-361"
},
{
"issueid": "3301728",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-336"
},
{
"issueid": "3297381",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-300"
},
{
"issueid": "3295913",
"issuetype": "Task",
"status": "Review",
"id": "ATTDATA-290"
},
{
"issueid": "3295893",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-289"
},
{
"issueid": "3291658",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-256"
},
{
"issueid": "3291653",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-255"
},
{
"issueid": "3291530",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-253"
},
{
"issueid": "3290232",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-247"
},
{
"issueid": "3287061",
"issuetype": "Task",
"status": "Resolved",
"id": "ATTDATA-226"
}
]
},
{
"issueid": "3300899",
"issuetype": "Request",
"status": "REJECTED",
"id": "ATI-1478"
}
]
}
最佳答案
Mike Bostock 的链接示例使用 d3.stratify 将 CSV 数据转换为分层形式:
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
[... later in the code...]
var root = tree(stratify(root));
在您的情况下,您的数据已经是分层形式,因此您可以通过 d3.hierarchy 运行它将其转换为 d3 类型的层次结构,然后使用它创建图表:
var root = tree(d3.hierarchy(data));
您还需要将提取数据的函数从 d3.csv
更改为 d3.json
:
// assume your data is in `data.json`
d3.json("data.json", function(error, data) {
所以脚本的顶部现在看起来像这样:
<script type="text/javascript">
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");
var tree = d3.tree()
.size([2 * Math.PI, 300])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
d3.json("data.json", function(error, data) {
if (error) throw error;
var root = tree(d3.hierarchy(data));
Here's a .block使用您上面提供的 JSON 数据中的树。
关于javascript - 如何使用 d3.js 可视化 JSON TreeMap ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52207816/