Question

我有一个看起来像这样的JSON文件：

{
    Object: {
        children: Array[4]
        ...
    Object: {
        children: Array[1]
            Object: {
                 children: Array[3]
                 ...
            },
            Object: {
                 children: Array[1]
                 ...
            },
        ...
    }
    ...
}

该数组是一组具有子数组的对象，这些子数组包含几个级别的子数组。

我的问题是，当我尝试将其转换为一组节点和链接以用于d3强制布局时，我无法正确显示它。我已经尝试使用array.map或forEach递归遍历所有对象并自己创建链接，但这似乎过于繁琐。

是否有更简单的方法可以将这些数据准备好以力布局显示？我错过了什么？

Answer 1

您可能希望使用Reingold-Tilford tree in D3.js,而不是强制定向布局。这样，您的数据已经采用正确的格式，布局也可以更好地工作。

如果您确实想要使用真正的强制导向布局，那么您将不得不将数据重写为D3期望的nodes和links格式。无论如何，这是网络图的标准逻辑结构。

Answer 2

我找到了一个有我需要的代码的例子。此功能使数据变平。这是在Coffeescript，因为这就是我使用的。

flatten: (root) =>
    nodes = []
    i = 0
    recurse = (node) =>
        if node.children
            node.size = node.children.reduce(
                (p, v) -> p + recurse(v)
            , 0)
        if !node.id
            node.id = ++i
        nodes.push(node)
        node.size
    root.size = recurse(root)
    nodes

在我这样做之后，我可以运行tree.layout（）。links（）来生成链接而无需手动执行。

@nodes = @flatten(@root)
@links = d3.layout.tree().links(@nodes)

希望帮助某人，因为文档或维基中没有记录。

Answer 3

javascript函数将是：

function flatten(root) {    
var nodes = [], i = 0;

function recurse(node) {
    if (node.children) 
        node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
    if (!node.id) 
        node.id = ++i;
    nodes.push(node);
    return node.size;
}

root.size = recurse(root);
return nodes;
}

来自JSON的D3节点和链接与嵌套的子数组

3 个答案: