Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
d5ecdd1cbc
joyent-portal/spikes/architecture/d3/index.html

176 lines
4.9 KiB
HTML
Raw Normal View History

Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
.links line {
stroke: #343434;
stroke-opacity: 1;
}
.exclamation {
font-family: LibreFranklin;
font-size: 16px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
text-align: center;
color: #d75148;
}
</style>
<svg width='960' height='600'></svg>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
var svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height');
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
spikes: architecture diagram nodes repel from each other
2016-11-07 18:36:53 +02:00
.force('charge', d3.forceManyBody().strength(() => -50).distanceMin(() => 30))
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
.force('link', d3.forceLink().distance(() => 200).id(function(d) { return d.id; }))
spikes: architecture diagram nodes repel from each other
2016-11-07 18:36:53 +02:00
.force('collide', d3.forceCollide().radius(function(d) { return 128 + 0.5; }).iterations(2))
.force('center', d3.forceCenter(width / 2, height / 2))
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
function rightRoundedRect(x, y, width, height, radius) {
return 'M' + x + ',' + y // Move to (absolute)
+ 'h ' + (width - radius) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+ 'h ' + (radius - width) // Horizontal lint to (relative)
+ 'z '; // path back to start
}
function leftRoundedRect(x, y, width, height, radius) {
return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+ 'v ' + height // Vertical line to (relative)
+ 'h ' + (radius - width) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+ 'z '; // path back to start
}
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
d3.json('services.json', function(error, graph) {
if (error) throw error;
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// Drawing the links between nodes
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
var link = svg.append('g')
.attr('class', 'links')
.selectAll('line')
.data(graph.links)
.enter().append('line')
.attr('stroke-width', '2px')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// And svg group, to contain all of the attributes in @antonas' first prototype
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
var node = svg.selectAll('.node')
.data(graph.nodes)
.enter()
.append('g')
.attr('class', 'node_group');
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// Info Box
node.append('path')
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
.attr('class', 'node_info')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
.attr('d', leftRoundedRect('0', '0', 48, 48, 4))
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
.attr('stroke', '#bc3e35')
.attr('stroke-width', '1px')
.attr('fill', '#d6534a')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// node.append('rect')
// .attr('class', 'node_info')
// .attr('stroke', '#bc3e35')
// .attr('stroke-width', '1px')
// .attr('fill', '#d6534a')
// .attr('height', '48px')
// .attr('width', '48px')
// .attr('rx', '4')
// .attr('ry', '4')
// Box where label will live
node.append('path')
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
.attr('class', 'node')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
.attr('d', rightRoundedRect('48', '0', 112, 48, 4))
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// A circle that appears within the infobox.
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
node.append('circle')
.attr('class', 'alert')
.attr('cx', '24')
.attr('cy', '24')
.attr('stroke-width', '0px')
.attr('fill', '#fff')
.attr('r', '9px')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// An icon or label that exists within the circle, inside the infobox
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
node.append('text')
.attr('class', 'exclamation')
.attr('x', '24')
.attr('y', '30')
.attr('text-anchor', 'middle')
.attr('fill', '#d75148')
.text('!')
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
// Hover-over text for a node's label.
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
node.append('text')
.attr('class', 'info_text')
.attr('x', '100')
.attr('y', '30')
.attr('text-anchor', 'middle')
.attr('fill', '#fff')
.text(d => d.id)
node.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended));
node.append('title')
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on('tick', ticked);
simulation.force('link')
.links(graph.links);
function ticked() {
link
.attr('x1', function(d) { return d.source.x + 80; })
.attr('y1', function(d) { return d.source.y + 24; })
.attr('x2', function(d) { return d.target.x + 80; })
.attr('y2', function(d) { return d.target.y + 24; });
node
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; });
spikes: architecture digram looks nicer This fixes the rounded rectangles not looking correctly and shows as a proof of concept what is needed for more complicated shapes. In this example we implement the two rounded corners of a rectangle as a svg `path` which is abstracted away as a function. Further steps could be made to make this a d3 shape, however is not needed at this stage.
2016-11-07 17:10:32 +02:00
svg.selectAll('.node_group')
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
Spikes of d3 and sigma.js
2016-11-04 18:46:06 +02:00
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
Reference in New Issue Copy Permalink