Skip to content

Instantly share code, notes, and snippets.

@ajmistu

ajmistu/.block

Last active August 2, 2017 04:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ajmistu/2e4395676300f5f93e8b85661a4415b3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ajmistu/2e4395676300f5f93e8b85661a4415b3 to your computer and use it in GitHub Desktop.
Download ZIP
Collapsible Force Layout (Sample 3 collapsible into one node)
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<script charset="utf-8" src="../d3/d3.js"></script>
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style>
/*.node circle {*/
/* cursor: crosshair;*/
/* stroke: #fff;*/
/* stroke-width: 1.5px;*/
/*}*/
/*.node text {*/
/* font: 11px calibri, arial, sans-serif;*/
/* pointer-events: none;*/
/* text-anchor: middle;*/
/*}*/
/*line.link {*/
/* fill: none;*/
/* stroke: #999;*/
/* stroke-width: 1px;*/
/* stroke-dasharray: 2 2;*/
/*}*/
.node circle {
cursor: pointer;
stroke: #3a90bf;
stroke-width: 20px;
}
.node text {
font: 14x sans-serif;
pointer-events: none;
text-anchor: left;
/* color: "blue" ; */
}
line.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
</style>
<base target="links" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var nodes2 = [];
var width = 800,
height = 800,
root;
var leafColor = d3.scale.category20();
var force = d3.layout.force()
.linkDistance(50)
.charge(-700)
.gravity(0.1)
.size([width, height])
.on("tick", tick);
var parentschildren=[];
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
var linkedByIndex = {}; //?
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.json("Sample3fixednodes.json", function(error, json) {
root = json;
update();
// root.children.forEach(click);
simulateClick ();
});
function simulateClick(){
$.fn.d3Click = function (i) {
// if(i===0){
this.each(function (i, e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
console.log(e);
e.dispatchEvent(evt);
// nodeEnter.on("click", click)
evt.stopPropagation()
}); //}
};
console.log(nodes2)
var newNodes = [];
for(i=nodes2.length; i>=0; i--){
newNodes.push(nodes2[i])
}
console.log(nodes2.length)
// for(i=0;i<name.length;i++){
// d3.select().click();
// $('#D').d3Click();
// simulateClick('#'+name[i])
// $('#'+parentschildren[i]).d3Click();
// }
// $('#PARENT').d3Click();
$('#name').d3Click();
for(i=0;i<newNodes.length;i++){
// d3.select().click();
// $('#D').d3Click();
//simulateClick('#'+parentschildren[i])
if(newNodes[i]){
$('#'+newNodes[i]).d3Click();
}
}
$('#PARENT').d3Click();
// $('#PARENT').d3Click();
}
function update(d) {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update links.
link = link.data(links, function(d) { return d.target.id; });
link.exit().remove();
link.enter().insert("line", ".node")
.attr("class", "link");
// Update nodes.
node = node.data(nodes, function(d) { return d.id; });
// Exit any old links.
node.exit().remove();
// Enter any new nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.on("click", click)
.call(force.drag)
.attr("href", function(d) { return d.link; });
nodeEnter.append("svg:a")
.attr("xlink:href", function(d){return d.link;})
.append("circle").attr('id', function(d){ return d.name})
.attr("r", function(d) { return Math.sqrt(d.size) / 15 || 3.5; });
nodeEnter.append("text")
.attr("dy", "0.35em")
.attr("dx", "1em")
.text(function(d) { return d.name; });
node.select("circle")
.style("fill", "#ff7400")
.style("stroke-width", "2px");
if(parentschildren.length<1){
node.filter(function(d){
//console.log(d.name)
return d.name === 'PARENT'
}).each(function(d){
for(i=0;i<d.children.length;i++){
parentschildren.push(d.children[i].name);
}
});
}
// document.getElementById('D').click();
console.log(parentschildren)
//$("#D").click();
}
function tick(d) {
// sets the bounding box
node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, 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; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function color(d) {
// console.log(d)
return leafColor(d.parentname)
}
function neighboring(a, b) {
return a.index == b.index || linkedByIndex[a.index + "," + b.index];
}
// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
// // marks the clicked node
// d3.selectAll(".link").transition().duration(500)
// .style("stroke-width", function(o) {
// return o.target === d || o.target === d ? 3 : 1;
// }).style("stroke", function(o) {
// return o.target === d || o.target === d ? "red" : "grey";
// });
// d3.selectAll(".node").transition().duration(500)
// .style("stroke-width", function(o) {
// return neighboring(d, o) ? 1 : 0;
// }).style("stroke", function(o) {
// return neighboring(d, o) ? "red" : "white";
// });
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) {
nodes2.push(node.name)
node.children.forEach(recurse);
}
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
console.log(nodes2)
return nodes;
}
</script>
</div>
</div><!--end of row-->
</div><!--end of container-fluid-->
</body>
</html>
Raw
Sample3fixednodes.json
{
"name": "1",
"x": 100,
"y": 100,
"fixed": true,
"class": "node",
"children": [
{
"name": "deer",
"size": 16302
},
{
"name": "elk",
"size": 16302
},
{
"name": "blackbuck",
"size": 16302
},
{
"name": "2",
"x": 150,
"y": 150,
"fixed": true,
"class": "node",
"children": [
{
"name": "pony",
"size": 16540
},
{
"name": "mule",
"size": 16540
},
{
"name": "male horse",
"size": 16540
},
{
"name": "3",
"x": 200,
"y": 200,
"fixed": true,
"class": "node",
"children": [
{
"name": "warhorse",
"size": 16302
},
{
"name": "4",
"x": 280,
"y": 250,
"fixed": true,
"class": "node",
"children": [
{
"name": "goat",
"size": 16540
},
{
"name": "5",
"x": 350,
"y": 300,
"fixed": true,
"class": "node",
"children": [
{
"name": "sheep",
"size": 16540
},
{
"name": "6",
"x": 450,
"y": 330,
"fixed": true,
"class": "node",
"children": [
{
"name": "bison",
"size": 16540
},
{
"name": "7",
"x": 540,
"y": 340,
"fixed": true,
"class": "node",
"children": [
{
"name": "zebra",
"size": 16540
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment