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.
This commit is contained in:
parent
d558cb4f20
commit
68a2cc800d
@ -33,9 +33,30 @@ var simulation = d3.forceSimulation()
|
|||||||
.force('charge', d3.forceManyBody())
|
.force('charge', d3.forceManyBody())
|
||||||
.force('center', d3.forceCenter(width / 2, height / 2));
|
.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) {
|
d3.json('services.json', function(error, graph) {
|
||||||
if (error) throw error;
|
if (error) throw error;
|
||||||
|
|
||||||
|
// Drawing the links between nodes
|
||||||
var link = svg.append('g')
|
var link = svg.append('g')
|
||||||
.attr('class', 'links')
|
.attr('class', 'links')
|
||||||
.selectAll('line')
|
.selectAll('line')
|
||||||
@ -43,6 +64,7 @@ d3.json('services.json', function(error, graph) {
|
|||||||
.enter().append('line')
|
.enter().append('line')
|
||||||
.attr('stroke-width', '2px')
|
.attr('stroke-width', '2px')
|
||||||
|
|
||||||
|
// And svg group, to contain all of the attributes in @antonas' first prototype
|
||||||
var node = svg.selectAll('.node')
|
var node = svg.selectAll('.node')
|
||||||
.data(graph.nodes)
|
.data(graph.nodes)
|
||||||
.enter()
|
.enter()
|
||||||
@ -50,28 +72,31 @@ d3.json('services.json', function(error, graph) {
|
|||||||
.attr('class', 'node_group');
|
.attr('class', 'node_group');
|
||||||
|
|
||||||
// Info Box
|
// Info Box
|
||||||
node.append('rect')
|
node.append('path')
|
||||||
.attr('class', 'node_info')
|
.attr('class', 'node_info')
|
||||||
|
.attr('d', leftRoundedRect('0', '0', 48, 48, 4))
|
||||||
.attr('stroke', '#bc3e35')
|
.attr('stroke', '#bc3e35')
|
||||||
.attr('stroke-width', '1px')
|
.attr('stroke-width', '1px')
|
||||||
.attr('fill', '#d6534a')
|
.attr('fill', '#d6534a')
|
||||||
.attr('height', '48px')
|
// node.append('rect')
|
||||||
.attr('width', '48px')
|
// .attr('class', 'node_info')
|
||||||
.attr('rx', '4')
|
// .attr('stroke', '#bc3e35')
|
||||||
.attr('ry', '4')
|
// .attr('stroke-width', '1px')
|
||||||
|
// .attr('fill', '#d6534a')
|
||||||
|
// .attr('height', '48px')
|
||||||
|
// .attr('width', '48px')
|
||||||
|
// .attr('rx', '4')
|
||||||
|
// .attr('ry', '4')
|
||||||
|
|
||||||
// Box where text will live
|
// Box where label will live
|
||||||
node.append('rect')
|
node.append('path')
|
||||||
.attr('class', 'node')
|
.attr('class', 'node')
|
||||||
.attr('x', '48')
|
.attr('d', rightRoundedRect('48', '0', 112, 48, 4))
|
||||||
.attr('stroke', '#343434')
|
.attr('stroke', '#343434')
|
||||||
.attr('stroke-width', '1px')
|
.attr('stroke-width', '1px')
|
||||||
.attr('fill', '#464646')
|
.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')
|
node.append('circle')
|
||||||
.attr('class', 'alert')
|
.attr('class', 'alert')
|
||||||
.attr('cx', '24')
|
.attr('cx', '24')
|
||||||
@ -80,6 +105,7 @@ d3.json('services.json', function(error, graph) {
|
|||||||
.attr('fill', '#fff')
|
.attr('fill', '#fff')
|
||||||
.attr('r', '9px')
|
.attr('r', '9px')
|
||||||
|
|
||||||
|
// An icon or label that exists within the circle, inside the infobox
|
||||||
node.append('text')
|
node.append('text')
|
||||||
.attr('class', 'exclamation')
|
.attr('class', 'exclamation')
|
||||||
.attr('x', '24')
|
.attr('x', '24')
|
||||||
@ -88,6 +114,7 @@ d3.json('services.json', function(error, graph) {
|
|||||||
.attr('fill', '#d75148')
|
.attr('fill', '#d75148')
|
||||||
.text('!')
|
.text('!')
|
||||||
|
|
||||||
|
// Hover-over text for a node's label.
|
||||||
node.append('text')
|
node.append('text')
|
||||||
.attr('class', 'info_text')
|
.attr('class', 'info_text')
|
||||||
.attr('x', '100')
|
.attr('x', '100')
|
||||||
@ -122,8 +149,8 @@ d3.json('services.json', function(error, graph) {
|
|||||||
.attr('cx', function(d) { return d.x; })
|
.attr('cx', function(d) { return d.x; })
|
||||||
.attr('cy', function(d) { return d.y; });
|
.attr('cy', function(d) { return d.y; });
|
||||||
|
|
||||||
svg.selectAll(".node_group")
|
svg.selectAll('.node_group')
|
||||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user