Javascript 我应该如何格式化JSON并向我解释一些基本的d3图形节点链接？

我想使用D3.js将这个JSON中的数据表示为一个节点链接。我不熟悉JavaScript和D3.js。我有3种类型的数据，我想在这3种类型的数据之间建立一个层次结构。父项>源项>子项，我想将每个父项定位在源项上方，并将每个父项链接到源项，每个子项应位于源项下方，并将它们链接到源项：

script.js Index.html graph.json 如果有人有时间和心情向我解释如何格式化JSON，以便我能更有效地使用它，并向我解释如何使用d3一步一步地创建节点链接图，或者给我一个演示并解释每一段代码，我将非常感激。

---

如果我问问题的方式有问题，或者有不清楚的地方，请说出来，以便我可以编辑。谢谢大家!

好的，简而言之，force将所有节点放在一个svg上，并为它们提供许多属性，一些属性链接到数据，一些属性链接到force图的行为

通常，节点彼此排斥，但可以通过设置d3.forceManyBody的强度来更改此行为

链接将在节点之间创建一个力，该力可用于将节点拉到一起，或将它们保持在设定的距离

通常，力会将所有节点拉向图形的中心，但可以将它们设置为吸引到任何位置。在您的例子中，您希望在顶部中心（例如SVG下方25%）有一个点来吸引父节点（组1），在底部中心（SVG下方75%）有一个点来吸引子节点（组2）。可以将源节点设置为中心

var position = d3.forceSimulation(graph.nodes).force("charge", d3.forceManyBody()).force("x", d3.forceCenter(width / 2, height/ 2)).force("collide", d3.forceCollide(15 * R));
    nodes.each(function(d) {
        if (d.group == 0) {
            d.fx = wid / 2;//fix X value
            d.fy = wid / 2//fix Y value
        }
    });

如果您可以设置一个JSFIDLE或类似的工具，并让它工作起来，我可能会看到您遇到了什么困难（看起来您的订单在加载数据之前创建链接有点困难）。此外，您正在加载d3版本3，在开始时，您最好现在切换到版本4

---

编辑：这是我的理解，我认为我上面链接的资源可能更好

好的，简而言之，force将所有节点放在一个svg上，并为它们提供许多属性，一些属性链接到数据，一些属性链接到force图的行为

通常，节点彼此排斥，但可以通过设置d3.forceManyBody的强度来更改此行为

链接将在节点之间创建一个力，该力可用于将节点拉到一起，或将它们保持在设定的距离

通常，力会将所有节点拉向图形的中心，但可以将它们设置为吸引到任何位置。在您的例子中，您希望在顶部中心（例如SVG下方25%）有一个点来吸引父节点（组1），在底部中心（SVG下方75%）有一个点来吸引子节点（组2）。可以将源节点设置为中心

var position = d3.forceSimulation(graph.nodes).force("charge", d3.forceManyBody()).force("x", d3.forceCenter(width / 2, height/ 2)).force("collide", d3.forceCollide(15 * R));
    nodes.each(function(d) {
        if (d.group == 0) {
            d.fx = wid / 2;//fix X value
            d.fy = wid / 2//fix Y value
        }
    });

如果您可以设置一个JSFIDLE或类似的工具，并让它工作起来，我可能会看到您遇到了什么困难（看起来您的订单在加载数据之前创建链接有点困难）。此外，您正在加载d3版本3，在开始时，您最好现在切换到版本4

---

编辑：这是我的理解，我认为我上面链接的资源可能更好

这是一个相当大的问题，需要解释的工作很多。在我看来，您的Json格式正确，并提供了链接（将每个子级和父级链接到“源代码”）。您当然可以在SVG中使用force将父/子组合在一起。你读过书吗。如果你设置了gist/block、JSFIDLE或plunkr，那么你可以测试你的代码，人们可以看到错误。是的，我已经阅读了很多教程并解释了代码，但我仍然不明白，谢谢你提供的链接，我将查看免费视频。这是一个很大的问题，需要解释很多工作。在我看来，您的Json格式正确，并提供了链接（将每个子级和父级链接到“源代码”）。您当然可以在SVG中使用force将父/子组合在一起。你读过书吗。如果你设置了gist/block、JSFIDLE或plunkr，那么你可以测试你的代码，人们可以看到错误。是的，我已经阅读了很多教程并解释了代码，但我仍然不明白，谢谢你提供的链接，我将查看免费视频。好的，这很有帮助，我正试图按照您的要求重写代码并设置JSFIDLE，这可能需要一些时间，所以请不要动。再次感谢！好的，这有点帮助，我正在尝试重写代码，并根据您的需要设置一个JSFIDLE，这可能需要一些时间，所以请别动。再次感谢！

.link {
    stroke: #777;
    stroke-width: 2px;
}
.nodes circle{
  cursor: move;
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;

}
.node.fixed {
  fill: #f00;
}

 {
    "nodes":[
    {
        "id": "Source" , "group" :0
    },
    {
        "id":"Parent_1" , "group" : 1 
    },
    {
        "id": "Parent_2" , "group" :1
    },
    {
        "id": "Parent_3" , "group" :1
    },

    {
        "id":"Child_1" , "group":2
    },
    {
        "id":"Child_2" , "group":2
    },
    {
        "id":"Child_3" , "group":2}
    ],
    "links":[
    {
    "source":"Source","target":"Parent_1"
    },
    {
    "source":"Source","target":"Parent_2"
    },
    {
    "source":"Source","target":"Parent_3"
    },
    {
    "source":"Source","target":"Child_1"
    },
    {
    "source":"Source","target":"Child_2"
    },
    {
    "source":"Source","target":"Child_3"
    },

    ]



    }

var position = d3.forceSimulation(graph.nodes).force("charge", d3.forceManyBody()).force("x", d3.forceCenter(width / 2, height/ 2)).force("collide", d3.forceCollide(15 * R));
    nodes.each(function(d) {
        if (d.group == 0) {
            d.fx = wid / 2;//fix X value
            d.fy = wid / 2//fix Y value
        }
    });