add arrows to indicate link directionality
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 5063039..3a63ae2 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -43,6 +43,11 @@
border: 1px solid white;
}
+#arrow {
+ stroke: none;
+ fill: rgba(255, 255, 255, .25);
+}
+
.header {
height: 50px;
}
@@ -92,7 +97,7 @@
path {
stroke: rgba(255, 255, 255, .25);
- stroke-width: 1px;
+ stroke-width: 1.5px;
}
.aggregation {
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 2ceee48..d18b729 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -22,7 +22,19 @@
function createTopologyView() {
- return d3.select('#svg-container').append('svg:svg').append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
+ var svg = d3.select('#svg-container').append('svg:svg');
+
+ svg.append("svg:defs").append("svg:marker")
+ .attr("id", "arrow")
+ .attr("viewBox", "0 -5 10 10")
+ .attr("refX", -1)
+ .attr("markerWidth", 5)
+ .attr("markerHeight", 5)
+ .attr("orient", "auto")
+ .append("svg:path")
+ .attr("d", "M0,-5L10,0L0,5");
+
+ return svg.append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
attr('id', 'viewbox').append('svg:g').attr('transform', 'translate(500 500)');
}
@@ -220,30 +232,39 @@
})
.y(function(d) {
return d.y;
- })
- .interpolate("basis");
+ });
+// .interpolate("basis");
// key on link dpids since these will come/go during demo
- var links = d3.select('svg').selectAll('path').data(model.links, function (d) {
+ var links = d3.select('svg').selectAll('.link').data(model.links, function (d) {
return d['src-switch']+'->'+d['dst-switch'];
});
// add new links
- links.enter().append("svg:path").attr("d", function (d) {
+ links.enter().append("svg:path")
+ .attr("class", "link")
+ .attr("d", function (d) {
var src = d3.select(document.getElementById(d['src-switch']));
var dst = d3.select(document.getElementById(d['dst-switch']));
var srcPt = document.querySelector('svg').createSVGPoint();
srcPt.x = src.attr('x');
- srcPt.y = src.attr('y') + 10; // tmp: make up and down links distinguishable
+ srcPt.y = src.attr('y');
+ srcPt = srcPt.matrixTransform(src[0][0].getCTM());
var dstPt = document.querySelector('svg').createSVGPoint();
dstPt.x = dst.attr('x');
- dstPt.y = dst.attr('y') - 10; // tmp: make up and down links distinguishable
+ dstPt.y = dst.attr('y'); // tmp: make up and down links distinguishable
+ dstPt = dstPt.matrixTransform(dst[0][0].getCTM());
- return line([srcPt.matrixTransform(src[0][0].getCTM()), dstPt.matrixTransform(dst[0][0].getCTM())]);
- });
+ var midPt = document.querySelector('svg').createSVGPoint();
+ midPt.x = (srcPt.x + dstPt.x)/2;
+ midPt.y = (srcPt.y + dstPt.y)/2;
+
+ return line([srcPt, midPt, dstPt]);
+ })
+ .attr("marker-mid", function(d) { return "url(#arrow)"; });
// remove old links
links.exit().remove();