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

问题描述：

我想用这个JSON表示我的数据作为使用D3.js.的节点链接。我是JavaScript和D3.js的新手。我有3种类型的数据，我想在这3种类型的数据之间建立一个层次结构。家长>源>的孩子，我希望将源上述每一个家长定位和每一位家长链接到源，以及每一个孩子应该是源下，并将其链接到源：我应该如何格式化我的JSON并向我解释一些基本的d3图形节点链接？

的script.js

var width = 960, 
     height = 500; 

// i don't really understand what this does 
// except the .linkDistance - gives the dimension of the link 
var force = d3.layout.force() 
    .size([width, height]) 
    .charge(-400) 
    .linkDistance(40) 
    .on("tick", tick); 

// Drag the nodes 
var drag = force.drag() 
    .on("dragstart", dragstart); 

//Appends the svg - the place where i draw all my items 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

// Select all the links and nodes , from an array ? i don't really get it 
var link = svg.selectAll(".link"), 
    node = svg.selectAll(".node"); 

// The function where i take the data from the JSON 
d3.json("graph.json", function(error, graph) { 
    if (error) throw error; 

    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    link = link.data(graph.links) 
    .enter().append("line") 
     .attr("class", "link"); 

    node = node.data(graph.nodes) 
    .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 12) 
     .on("dblclick", dblclick) 
     .call(drag); 
}); 


// Here is the function where i should asign the position of the nodes and the links 
// This is the most problematic and i really don't understand it 
function tick(){} 

// The function to fix and to clear the fix from a node 
function dblclick(d) { 
    d3.select(this).classed("fixed", d.fixed = false); 
} 

function dragstart(d) { 
    d3.select(this).classed("fixed", d.fixed = true); 
}

的Index.html

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
     <meta charset="utf-8"> 
     <title>D3 Test</title> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
     <script src="script.js"></script> 
    </head> 
</body>

的style.css

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

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

graph.json

{ 
    "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" 
    }, 

    ] 



    }

如果有人解释我如何格式化我的JSON，所以我可以更多的使用它的时间和心情有效地解释我如何使用d3逐步创建节点链接图或给我一个演示并解释每一块代码，我将非常感谢。如果我提出问题的方式有问题，或者有什么不清楚的地方，请说出来我可以编辑它。谢谢！

这是一个相当大的问题，需要解释很多工作。你的Json在我看来很好，因为它的格式正确并提供了链接（将每个孩子和父母链接到“源”）。您当然可以使用武力在SVG中将父母/孩子分组在一起。你读过https://www.dashingd3js.com/和http://d3indepth.com/about/。如果你设置了一个gist/block，jsfiddle或者plunkr，那么你可以测试你的代码，并且人们可以看到错误。 –

是的，我一直在寻找很多教程和解释代码，但我仍然不明白，谢谢你，但我会检查免费视频的链接。 –

答

好吧，简单地说，force将你所有的节点放在一个svg上，并赋予它们很多属性，其中一些属性链接到数据，一些属性与force graph的行为有关。

一般来说，节点之间相互排斥，但这种行为可以通过设置d3.forceManyBody的强度来改变。

链接将在节点之间创建一个力，可用于将节点绘制在一起，或将它们保持在一定的距离。

通常，力会将所有节点拉向图的中心，但您可以将它们设置为吸引到任何位置。在你的情况下，你需要一个顶点（比SVG下降25％）的点来吸引父节点（组1）和点botton中心（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 
     } 
    });

如果你可以设置的jsfiddle或相似，并且得到的东西的工作，我也许可以看到这里你就完蛋了（它看起来像你的订单有点过创建加载数据的前链接）。另外，您正在开始加载d3版本3，现在也可以切换到版本4。

编辑：无论如何，这是我的理解，我认为我上面链接的资源可能好多了！

好的，这有点帮助，我试图重写代码并根据需要设置jsfiddle，但可能需要一些时间才能继续使用。再次感谢！ –

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

的script.js

的Index.html

的style.css

graph.json

相关推荐