Ich möchte meine Daten von diesem JSON als Knoten-Link mit D3.js darstellen. Ich bin neu in JavaScript und D3.js. Ich habe 3 Arten von Daten und ich möchte eine Hierarchie zwischen diesen 3 Arten von Daten machen. Eltern> Source> Kinder, ich will alle Eltern über der Quelle positionieren und alle Eltern auf die Quelle verweisen, und jedes Kind sollte unter der Quelle sein und verknüpfen sie mit der Quelle:Wie soll ich meinen JSON formatieren und mir einige grundlegende d3-Graphen-Node-Links erklären?
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"
},
]
}
Wenn jemand die Zeit und die Stimmung mir zu erklären hat, wie meine JSON zu formatieren, so kann ich es verwenden mehr effizient und um mir zu erklären, wie man ein Knoten-Link-Diagramm mit d3 Schritt für Schritt erstellen oder mir eine Demo und erklären jeden Block des Codes ich wäre sehr dankbar. Wenn es ein Problem bezüglich der Art und Weise gibt, wie ich die Frage gestellt habe oder etwas unklar ist, sage bitte, damit ich es bearbeiten kann. Vielen Dank !
Das ist eine ziemlich große Frage und eine Menge Arbeit zu erklären. Ihr Json sieht gut aus, da es korrekt formatiert ist und Links bereitstellt (die jedes Kind und Elternteil mit der "Quelle" verbinden). Sie können sicherlich die Kraft verwenden, um Eltern/Kinder in der SVG zusammen zu gruppieren. Hast du https://www.dashingd3js.com/ und http://d3indepth.com/about/ gelesen. Wenn Sie einen Gedanken/Block, eine JSFiddle oder einen Plunkr einrichten, können Sie Ihren Code in Aktion testen, und die Leute können sehen, was falsch ist. –
Ja, ich habe eine Menge Tutorials durchgesehen und Code erklärt, aber ich verstehe immer noch nicht, danke, aber für die Links werde ich die kostenlosen Videos überprüfen. –