ik was bezig met het maken van een tree waar ik later data kan invoegen of het kan laten synchroniseren het probleem is ik heb iets gevonden en het bewerkt naar mijn wensen op 1 ding na
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>boompje</title>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
</head>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var treeData = [
{
"name": "[Audio] Welkom",
"parent": "null",
"children": [
{
"name": "[Feestdagen] Check",
"parent": "[Audio] Welkom",
"children": [
{
"name": "[Weekplan] Check",
"parent": "[Feestdagen] Check",
"children":[
{
"name": "[Menu] Hoofdmenu",
"parent": "[Weekplan] Check",
"children":[
{
"name": "Audio",
"parent": "[Menu] Hoofdmenu"
},
{
"name": "Menu",
"parent": "[Menu] Hoofdmenu",
"children" : [
{
"name": "option1",
"parent": "Menu",
"children": [
{
"name": "audio",
"parent": "option1"
}
]
},{
"name": "option2",
"parent": "Menu",
"children": [
{
"name": "audio",
"parent": "option2"
}
]
}
]
},
{
"name": "Outband call",
"parent": "[Menu] Hoofdmenu",
"children" : [
{
"name": "Outband",
"parent": "Outband call" ,
"children" : [
{
"name" : "outband2",
"parent" : "Outband"
}
]
}
]
},
]
},
{
"name": "[Audio]gesloten",
"parent": "[Feestdagen]Check"
}
]
},
{
"name": "[Audio]gesloten",
"parent": "[Feestdagen]Check"
}
]
},
]
}
];
// ************** Generate the tree diagram *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 1960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; });
nodeEnter.append("circle")
.attr("r", 10)
.style("fill", "#fff");
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
}
</script>
</body>
</html>
ik moet zorgen dat audio gesloten tussen komt ipv een nieuwe tak krijgt
dus tussen feestdagen check en weekplan check
heeft iemand een suggestie hoe ik dit kan aanpakken heb veel dingen geprobeerd maar te vergeefs
