d3.js collapsable/expandable force chart with labels - javascript

I am working on a d3.js application which is using a force chart base with collaspable/expandable nodes. I am keen to integrate labels into the update function.
http://jsfiddle.net/Qh9X5/3452/
Here is the full code
$(document).ready(function () {
var init = function (json) {
var width = 960,
height = 500,
root;
var force = d3.layout.force()
.size([width, height])
.on("tick", tick);
var svg = d3.select("#holder").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
//d3.json("readme.json", function(json) {
root = json;
update();
//});
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force.nodes(nodes)
.links(links)
.start();
// Update the links…
link = link.data(links, function (d) {
return d.target.id;
});
// Exit any old links.
link.exit().remove();
// Enter any new links.
link.enter().insert("line", ".node")
.attr("class", "link")
.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
// Update the nodes…
node = node.data(nodes, function (d) {
return d.id;
}).style("fill", color);
// Exit any old nodes.
node.exit().remove();
// Enter any new nodes.
node.enter().append("circle")
.attr("class", "node")
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
})
.attr("r", function (d) {
return Math.sqrt(d.size) / 10 || 4.5;
})
.style("fill", color)
.on("click", click)
.call(force.drag);
/*
var text = svg.append("svg:g")
.selectAll("g")
.data(force.nodes()).enter()
.append("svg:g");
text.append("svg:text")
.attr("x", options.labelFontSize)
.attr("y", ".31em")
.attr("class", "shadow")
.text(function (d) {
return d[options.nodeLabel];
});
*/
}
function tick() {
link.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
node.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}
// Toggle children on click.
function click(d) {
if (!d3.event.defaultPrevented) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [],
i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
};
var datajson = {
"name": "parentnode",
"children": [{
"name": "equens",
"children": [{
"name": "Paul",
"size": 3938
}, {
"name": "John",
"size": 3812
}, {
"name": "Jack",
"size": 6714
}]
}, {
"name": "test",
"children": [{
"name": "Jens",
"size": 3938
}, {
"name": "Robl",
"size": 3812
}, {
"name": "Mark",
"size": 6714
}]
}]
};
init(datajson);
});


Position attributes of text element are x, y. not cx and cy.
var texts = labels.enter()
.append("text")
.attr("class", "labels")
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
})
.attr("dx", 9)
.attr("dy", ".31em")
.text(function (d) {
return d.name;
});
Also add code to update position of text labels in tick function.
function tick() {
-------------------------
--------------------------
texts.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
});
}
Here is the updated JSFiddle

Related

D3v6 nested graph - nested join()?

I want to visualize the "children" insight each node. I guess the D3v6 .join() function can be nested. Unfortunately I can´t find any example. The snippet below contains an outerGraph with 3 nodes and children as attribute. So far those children aren´t used yet.
The innerGraph instead visualize the small nodes which will be obsolete as soon as the children approach is working. Another Idea would be to work with those two graphs and create a gravity / cluster, which will be the parent.
Goal: Either utilize the children attribute or combine both graphs with the help of an cluster /gravity or even nested join(). I am appreciating any hint / tip. The visuals result should be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3v6 nested nodes</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<style>
body {
background-color: whitesmoke;
}
</style>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight);
var width = window.innerWidth
var height = window.innerHeight
var outerLinkContainer = svg.append("g").attr("class", "outerLinkContainer")
var outerNodeContainer = svg.append("g").attr("class", "outerNodeContainer")
var innerLinkContainer = svg.append("g").attr("class", "innerLinkContainer")
var innerNodeContainer = svg.append("g").attr("class", "innerNodeContainer")
//###############################################
//############# outer force Layouts #############
//###############################################
var outerGraph = {
"nodes": [
{
"id": "A",
"children": [
{
"id": "A1"
},
{
"id": "A2"
}
]
},
{
"id": "B",
"children": [
{
"id": "B1"
},
{
"id": "B2"
}
]
},
{
"id": "C",
"children": [
{
"id": "C1"
},
{
"id": "C2"
}
]
}
],
"links": [
{
"source": "A",
"target": "B"
},
{
"source": "B",
"target": "C"
},
{
"source": "C",
"target": "A"
},
]
}
var outerLayout = d3.forceSimulation()
.force("center", d3.forceCenter(width / 2, height / 2))
.force("charge", d3.forceManyBody().strength(-500))
.force("link", d3.forceLink().id(function (d) {
return d.id;
}).distance(200))
var outerLinks = outerLinkContainer.selectAll(".link")
.data(outerGraph.links)
.join("line")
.attr("class", "link")
.style("stroke", "black")
.style("opacity", 0.2)
var outerNodes = outerNodeContainer.selectAll("g.outer")
.data(outerGraph.nodes, function (d) { return d.id; })
.join("circle")
.attr("class", "outer")
.style("fill", "pink")
.style("stroke", "blue")
.attr("r", 40)
.call(d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
)
outerLayout
.nodes(outerGraph.nodes)
.on("tick", ticked)
outerLayout
.force("link")
.links(outerGraph.links)
//###############################################
//############## inner force Layout #############
//###############################################
var innerGraph = {
"nodes": [
{ "id": "A1" },
{ "id": "A2" }
],
"links": [
{
"source": "A1",
"target": "A2"
}
]
}
var innerlayout = d3.forceSimulation()
.force("center", d3.forceCenter(width / 2, height / 2))
.force("charge", d3.forceManyBody().strength(-500))
.force("link", d3.forceLink().id(function (d) {
return d.id;
}).distance(200))
var innerLinks = innerLinkContainer.selectAll(".link")
.data(innerGraph.links)
.join("line")
.attr("class", "link")
.style("stroke", "black")
var innerNodes = innerNodeContainer.selectAll("g.inner")
.data(innerGraph.nodes, function (d) { return d.id; })
.join("circle")
.style("fill", "orange")
.style("stroke", "blue")
.attr("r", 6)
.attr("class", "inner")
.attr("id", function (d) { return d.id; })
.call(d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
)
innerlayout
.nodes(innerGraph.nodes)
.on("tick", ticked)
innerlayout
.force("link")
.links(innerGraph.links)
//###############################################
//################## functons ###################
//###############################################
function ticked() {
outerLinks
.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
innerLinks
.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
outerNodes.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
innerNodes.attr("transform", function (d) {
return "translate(" + (d.x) + "," + (d.y) + ")";
});
}
function dragStarted(event, d) {
if (!event.active)
outerLayout.alphaTarget(0.3).restart();
innerlayout.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragEnded(event, d) {
if (!event.active)
outerLayout.alphaTarget(0)
innerlayout.alphaTarget(0)
d.fx = undefined;
d.fy = undefined;
}
</script>
</body>
</html>
I will update the post as soon as I found a solution.

Here's a slightly hack way to do it - I am a bit disappointed in the outcome because if you play with the outerNodes then the links between innerNodes cross over in an unattractive way.
The changes I made in your code:
update innerGraph so nodes have a parent property (plus add the links required to match your screenshot in the question)
add an additional class on outerNodes so that each outer node can be identified e.g. .outer_A, .outer_B etc
add an additional class on innerNodes so that each inner node can be identified e.g. .child_A1, .child_A2 etc
in ticked - for innerNodes return a point for the inner node so that it is sitting inside centre of it's parent at roughly 20px from the centre on the vector between the original force simulation selected point and the parent's centre.
in ticked - for innerLinks, force the source and target coordinates to update per the previous step
Those last two points are per here and here.
So it works - but only just. Vertical scrolling in the stack snippet seems to upset it a bit but it's maybe better if you try it out on your own dev environment. I still think you could you look at other tools - maybe this one from cytoscape.js and also the webcola example I mentioned in the comments?
var svg = d3.select("body").append("svg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight);
var width = window.innerWidth
var height = window.innerHeight
var outerLinkContainer = svg.append("g").attr("class", "outerLinkContainer")
var outerNodeContainer = svg.append("g").attr("class", "outerNodeContainer")
var innerLinkContainer = svg.append("g").attr("class", "innerLinkContainer")
var innerNodeContainer = svg.append("g").attr("class", "innerNodeContainer")
//###############################################
//############# outer force Layouts #############
//###############################################
var outerGraph = {
"nodes": [
{
"id": "A",
"children": [
{
"id": "A1"
},
{
"id": "A2"
}
]
},
{
"id": "B",
"children": [
{
"id": "B1"
},
{
"id": "B2"
}
]
},
{
"id": "C",
"children": [
{
"id": "C1"
},
{
"id": "C2"
}
]
}
],
"links": [
{
"source": "A",
"target": "B"
},
{
"source": "B",
"target": "C"
},
{
"source": "C",
"target": "A"
},
]
}
var outerLayout = d3.forceSimulation()
.force("center", d3.forceCenter(width / 2, height / 2))
.force("charge", d3.forceManyBody().strength(-500))
.force("link", d3.forceLink().id(function (d) {
return d.id;
}).distance(200))
var outerLinks = outerLinkContainer.selectAll(".link")
.data(outerGraph.links)
.join("line")
.attr("class", "link")
.style("stroke", "black")
.style("opacity", 0.2)
var outerNodes = outerNodeContainer.selectAll("g.outer")
.data(outerGraph.nodes, function (d) { return d.id; })
.join("circle")
.attr("class", d => `outer outer_${d.id}`)
.style("fill", "pink")
.style("stroke", "blue")
.attr("r", 40)
.call(d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
)
outerLayout
.nodes(outerGraph.nodes)
.on("tick", ticked)
outerLayout
.force("link")
.links(outerGraph.links)
//###############################################
//############## inner force Layout #############
//###############################################
var innerGraph = {
"nodes": [
{ "id": "A1", "parent": "A" },
{ "id": "A2", "parent": "A" },
{ "id": "B1", "parent": "B" },
{ "id": "B2", "parent": "B" },
{ "id": "C1", "parent": "C" },
{ "id": "C2", "parent": "C" }
],
"links": [
{
"source": "A1",
"target": "A2"
},
{
"source": "A2",
"target": "B2"
},
{
"source": "A1",
"target": "C2"
},
{
"source": "B1",
"target": "B2"
},
{
"source": "B1",
"target": "C1"
},
{
"source": "C2",
"target": "C1"
}
]
}
var innerlayout = d3.forceSimulation()
.force("center", d3.forceCenter(width / 2, height / 2))
.force("charge", d3.forceManyBody().strength(-500))
.force("link", d3.forceLink().id(function (d) {
return d.id;
}).distance(200))
var innerLinks = innerLinkContainer.selectAll(".link")
.data(innerGraph.links)
.join("line")
.attr("class", "link linkChild")
.style("stroke", "black")
var innerNodes = innerNodeContainer.selectAll("g.inner")
.data(innerGraph.nodes, function (d) { return d.id; })
.join("circle")
.style("fill", "orange")
.style("stroke", "blue")
.attr("r", 6)
.attr("class", d => `inner child_${d.id}`)
.attr("id", function (d) { return d.id; })
.call(d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded)
)
innerlayout
.nodes(innerGraph.nodes)
.on("tick", ticked)
innerlayout
.force("link")
.links(innerGraph.links)
//###############################################
//################## functons ###################
//###############################################
function ticked() {
outerLinks
.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
outerNodes.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
innerNodes.attr("transform", function (d) {
var parent = d3.select(`.outer_${d.parent}`);
var pr = parent.node().getBoundingClientRect();
var prx = pr.left + (pr.width / 2);
var pry = pr.top + (pr.height / 2);
var distance = Math.sqrt( ((d.x - prx) ** 2) + ((d.y - pry) ** 2 ));
var ratio = 20 / distance;
var childX = ((1 - ratio) * prx) + (ratio * d.x);
var childY = ((1 - ratio) * pry) + (ratio * d.y);
return "translate(" + (childX) + "," + (childY) + ")";
});
innerLinks.attr("x1", d => {
var m1 = d3.select(`.child_${d.source.id}`).node().transform.baseVal[0].matrix;
return m1.e;
}).attr("y1", d => {
var m1 = d3.select(`.child_${d.source.id}`).node().transform.baseVal[0].matrix;
return m1.f;
}).attr("x2", d => {
var m2 = d3.select(`.child_${d.target.id}`).node().transform.baseVal[0].matrix;
return m2.e;
}).attr("y2", d => {
var m2 = d3.select(`.child_${d.target.id}`).node().transform.baseVal[0].matrix;
return m2.f;
});
}
function dragStarted(event, d) {
if (!event.active)
outerLayout.alphaTarget(0.3).restart();
innerlayout.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragEnded(event, d) {
if (!event.active)
outerLayout.alphaTarget(0)
innerlayout.alphaTarget(0)
d.fx = undefined;
d.fy = undefined;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>

arrays and nodes mapping in d3 force

lets say in d3 I have a couple data arrays like this:
Nodes:
var nodes = [
{"name": "abc", "type": "Db"},
{"name": "def", "type": "Db"},
{"name": "ghi", "type": "Db"},
{"name": "jkl", "type": "Db"}
]
Links:
var links = [
{source: nodes[0], target: nodes[1]},
{source: nodes[0], target: nodes[2]},
{source: nodes[1], target: nodes[3]}
]
is there a way that I can use names instead of the number? Like this:
var links = [
{source: nodes["abc"], target: nodes["def"]},
{source: nodes["abc"], target: nodes["ghi"]},
{source: nodes["def"], target: nodes["jkl"]}
]
but get this error:
Uncaught TypeError: Cannot read property 'x' of undefined
here:
link.attr("x1", function(d) { return d.source.x; })
here is the full code:
<!doctype html>
<html>
<head>
<title>D3 tutorial</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var w = 4000,
h = 4000;
var circleWidth = 5;
var fontFamily = 'Bree Serif',
fontSizeHighlight = '1.5em',
fontSizeNormal = '1em';
var palette = {
"lightgray": "#819090",
"gray": "#708284",
"mediumgray": "#536870",
"darkgray": "#475B62",
"darkblue": "#0A2933",
"darkerblue": "#042029",
"paleryellow": "#FCF4DC",
"paleyellow": "#EAE3CB",
"yellow": "#A57706",
"orange": "#BD3613",
"red": "#D11C24",
"pink": "#C61C6F",
"purple": "#595AB7",
"blue": "#2176C7",
"green": "#259286",
"yellowgreen": "#738A05"
}
var nodes = [
{"name": "abc", "type": "Db"},
{"name": "def", "type": "Db"},
{"name": "ghi", "type": "Db"},
{"name": "jkl", "type": "Db"}
]
var links = [
{source: nodes["abc"], target: nodes["def"]},
{source: nodes["abc"], target: nodes["ghi"]},
{source: nodes["def"], target: nodes["jkl"]}
]
var vis = d3.select("body")
.append("svg:svg")
.attr("class", "stage")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0.1)
.charge(-1000)
.size([w, h]);
var link = vis.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("stroke", "#CCC")
.attr("fill", "none");
var node = vis.selectAll("circle.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
//MOUSEOVER
.on("mouseover", function(d,i) {
if (i>0) {
//CIRCLE
d3.select(this).selectAll("circle")
.transition()
.duration(250)
.style("cursor", "none")
.attr("r", circleWidth+3)
.attr("fill",palette.black);
//TEXT
d3.select(this).select("text")
.transition()
.style("cursor", "none")
.duration(250)
.style("cursor", "none")
.attr("font-size","1.5em")
.attr("x", 15 )
.attr("y", 5 )
.text(function(d) { return d.name + "_" + d.type; })
} else {
//CIRCLE
d3.select(this).selectAll("circle")
.style("cursor", "none")
//TEXT
d3.select(this).select("text")
.style("cursor", "none")
}
})
//MOUSEOUT
.on("mouseout", function(d,i) {
if (i>0) {
//CIRCLE
d3.select(this).selectAll("circle")
.transition()
.duration(250)
.attr("r", circleWidth)
.attr("fill",palette.pink);
//TEXT
d3.select(this).select("text")
.transition()
.duration(250)
.attr("font-size","1em")
.attr("x", 8 )
.attr("y", 4 )
.text(function(d) { return d.name; })
}
})
.call(force.drag);
//CIRCLE
node.append("svg:circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", circleWidth)
.attr("fill", function(d, i) { if (i>0) { return palette.pink; } else { return palette.black } } )
//TEXT
node.append("text")
.text(function(d, i) { return d.name; })
.attr("x", function(d, i) { if (i>0) { return circleWidth + 5; } else { return -10 } })
.attr("y", function(d, i) { if (i>0) { return circleWidth + 0 } else { return 8 } })
.attr("font-family", "Bree Serif")
.attr("fill", function(d, i) { if (i>0) { return palette.black; } else { return palette.black } })
.attr("font-size", function(d, i) { if (i>0) { return "1em"; } else { return "1.8em" } })
.attr("text-anchor", function(d, i) { if (i>0) { return "beginning"; } else { return "end" } })
force.on("tick", function(e) {
node.attr("transform", function(d, i) {
return "translate(" + d.x + "," + d.y + ")";
});
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; })
});
force.start();
</script>
</body>
</html>

Make node an object, with each name as a property/key:
var nodes = {
abc: {"name": "abc", "type": "Db"},
def: {"name": "def", "type": "Db"},
ghi: {"name": "ghi", "type": "Db"},
jkl: {"name": "jkl", "type": "Db"}
}
Arrays can only be accessed by index (ie. array[3]), objects can be accessed by property (ie. object["propertyName"] or object.propertyName).

It's returning undefined because that number inside the square bracket is the index of the object (in this particular case) inside an array. When you use nodes[0] you are referencing the first object inside the array nodes (the index is zero-based, that is, 0 is the first object, 1 is the second and so on).
If you want to reference the object which value for the key name is "abc" you'll have to find it first. Please see this answer:
How to get index of object by its property in javascript

Grouping Circles and Path as a node in D3 Force Layout?

I'm trying to group the circles in the force directed graph layout, so that i could add the path of semi-circle that would make the circle into two semi-circle clickable sides. I managed to make two sides semi-circle clickable with d3 works just like this fiddle. I seems can't wrap d3 concept how to group, and connect the links.
How can i group the circles and the path and make it works with force layout? What are the concepts that i failed to understand to make this work? What did i do wrong?
Two sides clickable Semi-circle code
var vis = d3.select("body").append("svg")
var pi = Math.PI;
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(70)
.startAngle(0) //converting from degs to radians
.endAngle(pi) //just radians
var canvas = vis.attr("width", "400").attr("height", "400").append("g");
// Added height and width so arc is visible
canvas.append("circle")
.attr("r", "70px")
.attr("fill","blue")
.attr("cx",400/2)
.attr("cy",400/2)
.on("click", function(d){
console.log("View");
})
.on("mouseover", function(){ d3.select(this).style("fill", "blue");
console.log(d3.select(this.parentNode).select(".view").style("visibility","visible"));
})
.on("mouseout", function(){
d3.select(this).style("fill", "blue");
console.log(d3.select(this.parentNode).select(".view").style("visibility","hidden"));
});
canvas.append("path")
.attr("d", arc)
.attr("fill", "blue")
.attr("transform", "translate(200,200)")
.on("click",function(d){
console.log("Expand");
})
.on("mouseover", function(){ d3.select(this).style("fill", "blue");
console.log(d3.select(this.parentNode).select(".expand").style("visibility","visible"));
})
.on("mouseout", function(){
d3.select(this).style("fill", "blue");
console.log(d3.select(this.parentNode).select(".expand").style("visibility","hidden"));
});
canvas.append("text")
.attr("dx", "190")
.attr("dy","200")
.attr("class","view")
.text("VIEW")
canvas.append("text")
.attr("dx", "190")
.attr("dy","200")
.attr("class","expand")
.text("Expand")
Force Layout that uses circle as node code, inspired by this stackoverflow question
This fiddle
var words = [{
"group": "n",
"word": "main node",
"children": [{
"group": "n",
"name": "sub node 1"
}, {
"group": "n",
"name": "sub node 2"
}, {
"group": "n",
"name": "sub node 3"
}, {
"group": "v",
"name": "sub node 4"
}, {
"group": "s",
"name": "sub node 5"
}, {
"group": "s",
"name": "sub node 6"
}, {
"group": "s",
"name": "sub node 7"
}, {
"group": "s",
"name": "sub node 8"
}, {
"group": "s",
"name": "sub node 9"
}, {
"group": "s",
"name": "sub node 10"
}, {
"group": "s",
"name": "sub node 11"
}, {
"group": "r",
"name": "sub node 12",
"children": [{
"group": "r",
"name": "sub sub node 1"
}, {
"group": "r",
"name": "sub sub node 2"
}, {
"group": "r",
"name": "sub sub node 3"
}]
}]
}]
var w = 600,
h = 600,
radius = 30,
node,
link,
root;
var pi = Math.PI;
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(0) //converting from degs to radians
.endAngle(pi)
var force = d3.layout.force()
.on("tick", tick)
.charge(function(d) {
return -1000;
})
.linkDistance(function(d) {
return d.target._children ? 200 : 120;
})
.size([w, h - 160]);
var svg = d3.select("#viz").append("svg")
.attr("width", w)
.attr("height", h);
root = words[0]; //set root node
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update the links…
link = svg.selectAll(".link")
.data(links);
// Enter any new links.
link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
// Exit any old links.
link.exit().remove();
// Update the nodes…
node = svg.selectAll("circle.node")
.data(nodes, function(d) {
return d.name;
})
.style("fill", color);
node.transition()
.attr("r", radius);
// Enter any new nodes.
node.enter().append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", radius)
.style("fill", color)
//.on("click", click)
.on("click",function(){
console.log("Click Main Circle")
})
//.call(force.drag);
node.append("title")
.text(function(d) {
return d.name;
});
// Exit any old nodes.
node.exit().remove();
}
function tick() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
if (d._children) {
return "#95a5a6";
} else {
switch (d.group) {
case 'r': //adverb
return "#e74c3c";
break;
case 'n': //noun
return "#3498db";
break;
case 'v': //verb
return "#2ecc71";
break;
case 's': //adjective
return "#e78229";
break;
default:
return "#9b59b6";
}
}
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [],
i = 0;
function recurse(node) {
if (node.children) node.size = node.children.reduce(function(p, v) {
return p + recurse(v);
}, 0);
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}
root.size = recurse(root);
return nodes;
}
I have tried to group the circles, by grouping the circles and adding the semi-circle path in the group, but the layout breaks.
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(30)
.startAngle(0) //converting from degs to radians
.endAngle(pi)
var g = node.enter().append("g")
.attr("class", "node");
g.append("svg:circle")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", radius)
.style("fill", color)
//.on("click", click)
.on("click",function(){
console.log("Click Main Circle")
})
g.append("path")
.attr("d", arc)
.attr("fill", "blue")
.attr("transform", "translate(200,200)")
.on("click",function(d){
console.log("path");
})

Here is how you can fix your layout problem.
Instead of setting cx and cy to circle in the tick.
Do following:
Make a group
Add circle to above group (do not set cx/cy)
Add path to the above group. (do not set transform)
In tick do following to transform both circle and path which is contained in it.
function tick() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
//transform for nodes.
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"
})
}
Working code here
Hope this helps!

Load JSON object into D3 Force Directed Graph

I am having an extremely difficult time with loading this custom JSON object into my Force Directed Graph. I currently have one node being plotted on the canvas but nothing else seems to be showing up, yet I see the JSON is coming through the variable. I know there are some mistake with the getElementById and other conventions but I am not concerned about that. I am more concerned with figuring out why my JSON object is not being loaded into D3. I believe the problem is in:
root = JSON.parse(jsonObject);
console.log("root"+root);
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();
Here is the JSON Object:
{"nodes":[{"name":"Enrique_Acevedo","group":1,"size":1,"image":null},{"name":"DanaSenna","group":1,"size":3,"image":"http://pbs.twimg.com/profile_images/523240959111208960/f7yo6MeN_normal.jpeg"},{"name":"samspe3ks","group":1,"size":1,"image":"http://pbs.twimg.com/profile_images/639272140353568769/aMk9kLfV_normal.jpg"},{"name":"NRGMdaie","group":1,"size":1,"image":"http://pbs.twimg.com/profile_images/602232150822236160/QuZ9o-LY_normal.jpg"},{"name":"aPulaCVABBB","group":1,"size":5,"image":"http://pbs.twimg.com/profile_images/612764147353128961/SjqBEzvS_normal.jpg"},{"name":"amanda_paola","group":1,"size":1,"image":"http://pbs.twimg.com/profile_images/625547329463033856/fO_L38_I_normal.jpg"},{"name":"memoluna","group":1,"size":9,"image":"http://pbs.twimg.com/profile_images/603850856358744065/P1Y001yF_normal.jpg"},{"name":"chiquisholla","group":1,"size":20,"image":"http://pbs.twimg.com/profile_images/568655048419209216/_1nkyI3J_normal.jpeg"},{"name":"OrangeSky31","group":1,"size":4,"image":"http://pbs.twimg.com/profile_images/565820749345067009/WF1MuChB_normal.jpeg"},{"name":"megustanadar","group":1,"size":1,"image":"http://pbs.twimg.com/profile_images/604971301506281472/m9VNqFPA_normal.jpg"}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":1},{"source":3,"target":0,"value":1},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":1},{"source":9,"target":0,"value":1}]}
And here is the original JS File:
function start(){
var w = 1200,
h = 600,
radius = 10,
node,
link,
root;
var count = 0;
var force = d3.layout.force()
.on("tick", tick)
.charge(function(d) { return -500; })
.linkDistance(function(d) { return d.target._children ? 100 : 50; })
.size([w, h - 160]);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
root = JSON.parse(jsonObject);
console.log("root"+root);
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();
console.log("JsonObject2"+jsonObject)
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update the links…
link = svg.selectAll(".link")
.data(links);
// Enter any new links.
link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
// Exit any old links.
link.exit().remove();
// Update the nodes…
node = svg.selectAll("circle.node")
.data(nodes, function(d) {
return d.name;
})
.style("fill", color);
node.transition()
.attr("r", radius);
// Enter any new nodes.
node.enter().append("svg:circle")
.attr("xlink:href", function(d) { return d.image;})
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", radius)
.style("fill", color)
.on("click", click)
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
// Exit any old nodes.
node.exit().remove();
title = svg.selectAll("text.title")
.data(nodes);
// Enter any new titles.
title.enter()
.append("text")
.attr("class", "title");
//.text(function(d) { return d.name; });
// Exit any old titles.
title.exit().remove();
}
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
title.attr("transform", function(d){ return "translate("+d.x+","+d.y+")"; });
}
function checkTitle() {
}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
if(d._children){
return "#95a5a6";
}else{
switch(d.group) {
case 'r': //adverb
return "#e74c3c";
break;
case 'n': //noun
return "#3498db";
break;
case 'v': //verb
return "#2ecc71";
break;
case 's': //adjective
return "#e78229";
break;
default:
return "#9b59b6";
}
}
}
// Toggle children on click.
function click(d) {
document.getElementById("image").src = d.image;
document.getElementById("username").innerHTML = "Username:"+d.name;
document.getElementById("id").innerHTML = "ID:" + d.id;
document.getElementById("friends").innerHTML = d.friend;
document.getElementById("nodeTitle").innerHTML = "";
//document.getElementById("id").innerHTML = "Friend Count:" + d.name;
//if (d._children)
//grabImage();
//document.getElementById("image").innerHTML = (d.image);
/*if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();*/
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}
root.size = recurse(root);
return nodes;
}};
do{
var intervalID = window.setTimeout(start, 1000)
}
while(jsonObject!=""){
}

Your input data is wrong. nodes must be an array; you are passing it an object. You don't really need the flatten function here, your data is already flat. Also, you shouldn't need to call d3.layout.tree().links as your link data is also already formatted correctly:
function update() {
var nodes = root.nodes,
links = root.links;
Here's your code working:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
.node {
cursor: pointer;
stroke: #3182bd;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
var jsonObject = {
"nodes": [{
"name": "Enrique_Acevedo",
"group": 1,
"size": 1,
"image": null
}, {
"name": "DanaSenna",
"group": 1,
"size": 3,
"image": "http://pbs.twimg.com/profile_images/523240959111208960/f7yo6MeN_normal.jpeg"
}, {
"name": "samspe3ks",
"group": 1,
"size": 1,
"image": "http://pbs.twimg.com/profile_images/639272140353568769/aMk9kLfV_normal.jpg"
}, {
"name": "NRGMdaie",
"group": 1,
"size": 1,
"image": "http://pbs.twimg.com/profile_images/602232150822236160/QuZ9o-LY_normal.jpg"
}, {
"name": "aPulaCVABBB",
"group": 1,
"size": 5,
"image": "http://pbs.twimg.com/profile_images/612764147353128961/SjqBEzvS_normal.jpg"
}, {
"name": "amanda_paola",
"group": 1,
"size": 1,
"image": "http://pbs.twimg.com/profile_images/625547329463033856/fO_L38_I_normal.jpg"
}, {
"name": "memoluna",
"group": 1,
"size": 9,
"image": "http://pbs.twimg.com/profile_images/603850856358744065/P1Y001yF_normal.jpg"
}, {
"name": "chiquisholla",
"group": 1,
"size": 20,
"image": "http://pbs.twimg.com/profile_images/568655048419209216/_1nkyI3J_normal.jpeg"
}, {
"name": "OrangeSky31",
"group": 1,
"size": 4,
"image": "http://pbs.twimg.com/profile_images/565820749345067009/WF1MuChB_normal.jpeg"
}, {
"name": "megustanadar",
"group": 1,
"size": 1,
"image": "http://pbs.twimg.com/profile_images/604971301506281472/m9VNqFPA_normal.jpg"
}],
"links": [{
"source": 1,
"target": 0,
"value": 1
}, {
"source": 2,
"target": 0,
"value": 1
}, {
"source": 3,
"target": 0,
"value": 1
}, {
"source": 4,
"target": 0,
"value": 1
}, {
"source": 5,
"target": 0,
"value": 1
}, {
"source": 6,
"target": 0,
"value": 1
}, {
"source": 7,
"target": 0,
"value": 1
}, {
"source": 8,
"target": 0,
"value": 1
}, {
"source": 9,
"target": 0,
"value": 1
}]
};
start();
function start() {
var w = 1200,
h = 600,
radius = 10,
node,
link,
root;
var count = 0;
var force = d3.layout.force()
.on("tick", tick)
.charge(function(d) {
return -500;
})
.linkDistance(function(d) {
return d.target._children ? 100 : 50;
})
.size([w, h - 160]);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
root = jsonObject;
console.log("root" + root);
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();
console.log("JsonObject2" + jsonObject)
function update() {
var nodes = root.nodes,
links = root.links;
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update the links…
link = svg.selectAll(".link")
.data(links);
// Enter any new links.
link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
// Exit any old links.
link.exit().remove();
// Update the nodes…
node = svg.selectAll("circle.node")
.data(nodes, function(d) {
return d.name;
})
.style("fill", color);
node.transition()
.attr("r", radius);
// Enter any new nodes.
node.enter().append("svg:circle")
.attr("xlink:href", function(d) {
return d.image;
})
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", radius)
.style("fill", color)
.on("click", click)
.call(force.drag);
node.append("title")
.text(function(d) {
return d.name;
});
// Exit any old nodes.
node.exit().remove();
title = svg.selectAll("text.title")
.data(nodes);
// Enter any new titles.
title.enter()
.append("text")
.attr("class", "title");
//.text(function(d) { return d.name; });
// Exit any old titles.
title.exit().remove();
}
function tick() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
title.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
function checkTitle() {}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
if (d._children) {
return "#95a5a6";
} else {
switch (d.group) {
case 'r': //adverb
return "#e74c3c";
break;
case 'n': //noun
return "#3498db";
break;
case 'v': //verb
return "#2ecc71";
break;
case 's': //adjective
return "#e78229";
break;
default:
return "#9b59b6";
}
}
}
// Toggle children on click.
function click(d) {
document.getElementById("image").src = d.image;
document.getElementById("username").innerHTML = "Username:" + d.name;
document.getElementById("id").innerHTML = "ID:" + d.id;
document.getElementById("friends").innerHTML = d.friend;
document.getElementById("nodeTitle").innerHTML = "";
//document.getElementById("id").innerHTML = "Friend Count:" + d.name;
//if (d._children)
//grabImage();
//document.getElementById("image").innerHTML = (d.image);
/*if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();*/
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [],
i = 0;
function recurse(node) {
if (node.children) node.size = node.children.reduce(function(p, v) {
return p + recurse(v);
}, 0);
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}
root.size = recurse(root);
return nodes;
}
}
</script>
</body>
</html>

d3 updating data from GUI (circle pack layout)

As far as I see update(),enter(),exit() are used to update the view from the data. Is there also a way in the other direction, updating the data from the GUI?
e.g. click on the B-circle, click remove -> will be removed from GUI, but is still present in the data.. by clicking refresh, it appears again:
http://jsfiddle.net/stefanf/6Qm2z/33/
'var nodesToRemove = pack.nodes(data);
var sel = vis.selectAll("circle").data(nodesToRemove, function(d){
return d.id;
});
sel.remove();'
p.s. I now I could do it by first updating data with javascript, however my question is if there is a appropriate d3-way..

I've done this working fiddle http://jsfiddle.net/6Qm2z/36/
var dataGlobal = {
"name": "Area",
"id": 1,
"size": 1,
"children": [
{
"name": "F",
"id": 2,
"size": 1,
"children": [
{ "name": "C",
"id": "3",
"size": 1
},
{
"name": "D",
"id": 4,
"size": 1,
"children": [
{ "name": "A",
"id": 5,
"size": 0.5
},
{ "name": "B",
"id": 6,
"size": 1
}
]
},
{
"name": "H",
"id": 7,
"size": 1
}
]
}
]
};
var w = 680,
h = 600,
r = 420,
x = d3.scale.linear().range([0, r]),
y = d3.scale.linear().range([0, r]),
node,
root;
var pack = d3.layout.pack()
.size([r, r])
.value(function(d) { return d.size; })
var vis = d3.select("body").insert("svg:svg", "h2")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");
node = root = dataGlobal;
var refreshGraph = function(newArray) {
var nodes;
if(newArray != null){
nodes=newArray;
}
else{
nodes = pack.nodes(root);
}
var sel = vis.selectAll("circle")
.data(nodes, function(d) { return d.id; });
sel
.enter().append("svg:circle");
sel
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.on("dblclick", function(d) { return zoom(node == d ? root : d); })
.on("click", function () {
d3.select(".selected").classed("selected", false);
d3.select(this).classed("selected", true);
});
sel.exit().remove();
sel = vis.selectAll("text")
.data(nodes, function(d) { return d.name; });
sel
.enter().append("svg:text");
sel
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
.text(function(d) { return d.name; });
sel.exit().remove();
d3.select(window).on("click", function() { zoom(root); });
}
function zoom(d, i) {
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = vis.transition()
.duration(d3.event.altKey ? 7500 : 750);
t.selectAll("circle")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", function(d) { return k * d.r; });
t.selectAll("text")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
d3.select('#refreshBtn').on("click", function(d) {
updatedRefresh(dataGlobal);
});
d3.select('#addBtn').on("click", function(d) {
obj = {
"name": document.getElementById('textBtn').value,
"id": document.getElementById('idBtn').value,
"size": 1
}
d3.select(".selected").datum().children.push(obj)
refreshGraph()
});
d3.select("#deleteBtn").on("click", function() {
d3.select(".selected").each(function(data){
var nodesToRemove = pack.nodes(data);
var sel = vis.selectAll("circle").data(nodesToRemove, function(d){
return d.id;
});
sel.remove();
vis.selectAll("text").data(nodesToRemove, function(d){
return d.name;
})
.remove();
dataGlobal.children = prune(dataGlobal.children, data.id);
});
});
refreshGraph();
function prune(array, label) {
for (var i = 0; i < array.length; ++i) {
var obj = array[i];
if (obj.id === label) {
// splice out 1 element starting at position i
array.splice(i, 1);
return array;
}
if (obj.children) {
if (prune(obj.children, label)) {
if (obj.children.length === 0) {
// delete children property when empty
delete obj.children;
// or, to delete this parent altogether
// as a result of it having no more children
// do this instead
array.splice(i, 1);
}
return array;
}
}
}
}
function updatedRefresh(newArray) {
debugger;
var nodes;
if(newArray != null){
nodes=pack.nodes(newArray);
}
else{
nodes = pack.nodes(root);
}
var sel = vis.selectAll("circle")
.data(nodes, function(d) { return d.id; });
sel
.enter().append("svg:circle");
sel
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.on("dblclick", function(d) { return zoom(node == d ? root : d); })
.on("click", function () {
d3.select(".selected").classed("selected", false);
d3.select(this).classed("selected", true);
});
sel.exit().remove();
sel = vis.selectAll("text")
.data(nodes, function(d) { return d.name; });
sel
.enter().append("svg:text");
sel
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
.text(function(d) { return d.name; });
sel.exit().remove();
d3.select(window).on("click", function() { zoom(root); });
}
every time that you delete one item I update dataGlobal array with the prune function.
Look at the updatedRefresh function to update with an array input

Categories