diff --git a/spikes/architecture/d3/index.html b/spikes/architecture/d3/index.html
index 510366a1..0c7c0b5d 100644
--- a/spikes/architecture/d3/index.html
+++ b/spikes/architecture/d3/index.html
@@ -33,9 +33,30 @@ var simulation = d3.forceSimulation()
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width / 2, height / 2));
+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
+}
+
d3.json('services.json', function(error, graph) {
if (error) throw error;
+ // Drawing the links between nodes
var link = svg.append('g')
.attr('class', 'links')
.selectAll('line')
@@ -43,35 +64,39 @@ d3.json('services.json', function(error, graph) {
.enter().append('line')
.attr('stroke-width', '2px')
+ // And svg group, to contain all of the attributes in @antonas' first prototype
var node = svg.selectAll('.node')
.data(graph.nodes)
.enter()
.append('g')
.attr('class', 'node_group');
- // Info Box
- node.append('rect')
+ // Info Box
+ node.append('path')
.attr('class', 'node_info')
+ .attr('d', leftRoundedRect('0', '0', 48, 48, 4))
.attr('stroke', '#bc3e35')
.attr('stroke-width', '1px')
.attr('fill', '#d6534a')
- .attr('height', '48px')
- .attr('width', '48px')
- .attr('rx', '4')
- .attr('ry', '4')
+// 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 text will live
- node.append('rect')
+ // Box where label will live
+ node.append('path')
.attr('class', 'node')
- .attr('x', '48')
+ .attr('d', rightRoundedRect('48', '0', 112, 48, 4))
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
- .attr('height', '48px')
- .attr('width', '112px')
- .attr('rx', '4')
- .attr('ry', '4')
+ // A circle that appears within the infobox.
node.append('circle')
.attr('class', 'alert')
.attr('cx', '24')
@@ -80,6 +105,7 @@ d3.json('services.json', function(error, graph) {
.attr('fill', '#fff')
.attr('r', '9px')
+ // An icon or label that exists within the circle, inside the infobox
node.append('text')
.attr('class', 'exclamation')
.attr('x', '24')
@@ -88,6 +114,7 @@ d3.json('services.json', function(error, graph) {
.attr('fill', '#d75148')
.text('!')
+ // Hover-over text for a node's label.
node.append('text')
.attr('class', 'info_text')
.attr('x', '100')
@@ -122,8 +149,8 @@ d3.json('services.json', function(error, graph) {
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; });
- svg.selectAll(".node_group")
- .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+ svg.selectAll('.node_group')
+ .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
}
});