Skip to content

Instantly share code, notes, and snippets.

@dveeden
Created Jun 5, 2020
Embed
What would you like to do?
d3 group
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="g1">g1</div>
<div id="g2">g2</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 300
var svg1 = d3.select("#g1")
.append("svg")
.attr("width", width)
.attr("height", height);
var svg2 = d3.select("#g2")
.append("svg")
.attr("width", width)
.attr("height", height);
var tree = d3.layout.tree()
.size([width, height]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var force = d3.layout.force()
.gravity(0.1)
.distance(100)
.charge(-700)
.size([width, height]);
var color = function (group) {
if (group == 1) {
return "#aaa"
} else if (group == 2) {
return "#fbc280"
} else {
return "#405275"
}
}
var i = 0;
d3.json("t1.json", function (error, json) {
var nodes = tree.nodes(json),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = 300 + (d.depth * 150); d.x = d.x/5; });
var node = svg1.selectAll(".node")
.data(nodes, function(d) { return d.id || (d.id = ++i); })
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; });
node.append("circle")
.attr("r", 13)
.attr('fill', function (d) {
return color(d.group);
});
node.append("text")
.attr("dx", 10)
.attr("dy", 28)
.style("font-size", "18px")
.text(function (d) {
return d.name
});
var link = svg1.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
link.enter().insert("path", "g")
.attr("class", "link")
.style("stroke", "#4245f5")
.style("fill-opacity", "0")
.attr("d", diagonal);
var node_coords1 = node.filter(function(d) { return d.group == 1; })
.data()
.map(function(d) { return [ d.y, d.x ]; });
var hull1 = svg1.append("path")
.attr("class", "hull")
.style("fill", "darkolivegreen")
.style("fill-opacity", "20%")
.style("stroke", "darkgreen")
.style("stroke-opacity", "50%")
.attr("transform", "scale(1.5), translate(-130, -30)");
hull1.datum(d3.geom.hull(node_coords1))
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
});
d3.json("t2.json", function (error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg2.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link")
.style("stroke", "#4245f5");
var node = svg2.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append('circle')
.attr('r', 13)
.attr('fill', function (d) {
return color(d.group);
});
node.append("text")
.attr("dx", 20)
.attr("dy", 8)
.style("font-size", "18px")
.text(function (d) {
return d.name
});
var node_coords = [];
force.on("tick", function () {
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 + ")";
});
});
});
</script>
{
"name": "server1",
"group": 1,
"children": [
{
"name": "server2",
"group": 1
},
{
"name": "server3",
"group": 1,
"children": [
{
"name": "server4",
"group": 2
}
]
},
{
"name": "server5",
"group": 1
}
]
}
{
"nodes": [{
"name": "server1",
"group": 1
}, {
"name": "server2",
"group": 1
}, {
"name": "server3",
"group": 1
}, {
"name": "server4",
"group": 2
}, {
"name": "server5",
"group": 1
}],
"links": [{
"source": 0,
"target": 1
},{
"source": 0,
"target": 2
},{
"source": 1,
"target": 3
},{
"source": 0,
"target": 4
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment