感谢您在这方面的反馈。

Question

我在处理外部JSON数据以构建/显示树时遇到困难。问题是节点不是从收到的JSON文件构建的。代码只将JSON数据看作一个对象，而不创建叶子（其他节点）

在HTML文件中添加与数组相同的JSON数据时，相同的代码会创建节点并正确显示树。

以下是相关代码的摘录：

<body onload="myFunction()">

    <script type="text/javascript" >
        function myFunction()
        {
            d3.json("/data/mydata.json", function (error, data) {
            var root2 = [data];
            root = root2[0];
           ........... other stuff comes here .....
          var nodes = tree.nodes(root.reverse());

浏览器调试器给出了以下内容：

nodes

[Array [1] 0：Object childern：数组[2] 名称：＆＃34; Max＆＃34; 父母：＆＃34; null＆＃34; proto ：对象深度：0 长度：1 x：230 y：0 proto ：数组[0]

JOSN文件位于底部

感谢您在这方面的反馈。

[{
    "name": "Max",
    "parent": "null",
    "size": 4938,
    "childern": [
        {
            "name": "David",
            "parent": "Max",
            "Childern": [
                {
                    "name": "Craig",
                    "parent": "David",
                    "size": 3938
                },
                {
                    "name": "Robin",
                    "parent": "David",
                    "size": 3812
                },
                {
                    "name": "Anna",
                    "parent": "David",
                    "size": 743
                }
            ]
        },
        {
            "name": "Peter",
            "parent": "Max",
            "Childern": [
                {
                    "name": "Jeff",
                    "parent": "Peter",
                    "size": 3534
                },
                {
                    "name": "Buffy",
                    "parent": "Peter",
                    "size": 5731
                }
            ]
        }
    ]

}

Answer 1

您的外部JSON文件似乎具有较低层数据的大写字母“C”的“children”元素，但顶层的“c”小写。

另外，他们拼错了'Childern'可能导致了问题（你会想检查你的JavaScript，看看你是如何拼写它并使其保持一致）。

我能够使用外部JSON文件进行快速实验，我可以确认您会遇到类似于您描述的问题。因此，请在数据中使用小写字母（或至少一致的字符和拼写）。

尝试使用以下数据;

[{
    "name": "Max",
    "parent": "null",
    "size": 4938,
    "children": [
        {
            "name": "David",
            "parent": "Max",
            "children": [
                {
                    "name": "Craig",
                    "parent": "David",
                    "size": 3938
                },
                {
                    "name": "Robin",
                    "parent": "David",
                    "size": 3812
                },
                {
                    "name": "Anna",
                    "parent": "David",
                    "size": 743
                }
            ]
        },
        {
            "name": "Peter",
            "parent": "Max",
            "children": [
                {
                    "name": "Jeff",
                    "parent": "Peter",
                    "size": 3534
                },
                {
                    "name": "Buffy",
                    "parent": "Peter",
                    "size": 5731
                }
            ]
        }
    ]

}

D3 - 树节点不是从外部JSON文件构建的

感谢您在这方面的反馈。

1 个答案: