从节点和边而不是子级绘制径向树

Question

我能够从neo4j数据中用d3绘制一张图，但我在绘制一棵树时遇到了困难。我看到的示例使用了一个json文件，其中每个节点都包含一个自己的子节点数组。虽然这看起来很方便，但与neo4j接口并不容易-至少对我来说是这样。实际上，neo4j不会让一个从（n）-（m）图返回{nodes:collect（distinct{name:n.name，children:collate（distincent{name:m.name}）}）。然而，它将允许从路径返回节点和边的集合。

我的问题是，是否有可能在d3中从节点和边缘绘制一棵树，而无需为数据结构中的每个节点都设置子节点？

提前非常感谢皮埃尔

Answer 1

对于返回管理器及其各自的子级的cypher查询，这样做怎么样？

match (manager)<-[:REPORTS_TO]-(direct_reports)
return id(manager), collect(id(direct_reports))

Answer 2

从neo4j中检索节点和关系的Cypher查询应该是:

MATCH p=() <-[:REPORTS8TO]- ()
UNWIND nodes(p) AS n UNWIND rels(p) AS r 
WITH n, r ORDER BY n.Name 
RETURN {nodes: COLLECT(DISTINCT n), links: COLLECT(DISTINCT {source: id(endNode(r)), target: id(startNode(r))})}

因此，javascript 和 d3 代码： - 从 json 中提取节点和关系

var obj = JSON.parse(xmlhttp.responseText);
var json = obj.data[0][0];

var nodeMap = {};
json.nodes.forEach(function(x) {
    nodeMap[x.id] = x;
    nodeMap[x.id].children = [];
});

var links = json.links.map(function(x) {
    nodeMap[x.source].children.push(nodeMap[x.target]);
    return { source: nodeMap[x.source], target: nodeMap[x.target] };
});

画树

d3.select("#tree").select("svg").remove();

var width = 280, height = 870;

var margin = {
        top: 0,
        bottom: 0,
        left: 10,
        right: 120
    }

var tree = d3.layout.tree()
    .size([height - margin.top - margin.bottom, width - margin.left - margin.right]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#tree").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom )
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Compute the new tree layout from root
var nodes = tree.nodes(root).reverse(), links = tree.links(nodes);

var link = vis.selectAll("path.link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

var node = vis.selectAll("g.node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.y + ", " + d.x + ")"; })

node.append("rect")
    .attr("width", 9)
    .attr("height", 9)
    .attr("y", -4)
    .attr("class", function(d) { return "node "+d.type; } );

node.append("text")
    .attr("dx", function(d) { return d.children ? -14 : 14; })
    .attr("dy", 4)
    .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .attr("class", function(d) {return "node "+d.type+" text"; })
    .attr("style", "stroke-wdth: 0.5px; font: 10px sans-serif;")
    .text(function(d) { if (d.Name != "Panel") { return d.Name; }});