From 1619ca1444a88cd8b86ff8d1a70307cf7e06c172 Mon Sep 17 00:00:00 2001
From: feger <marc.feger@hhu.de>
Date: Thu, 27 Jun 2019 16:22:06 +0200
Subject: [PATCH] Add styles and edge markers
---
src/index.html | 14 +++++++++++---
src/js/visualizer/visualizer.js | 30 ++++++++++++++++++++----------
2 files changed, 31 insertions(+), 13 deletions(-)
diff --git a/src/index.html b/src/index.html
index 6d3a0bb..580de53 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,13 +2,21 @@
<meta charset="utf-8">
<style>
body {
+ background: antiquewhite;
font-family: "Inconsolata";
}
circle {
- fill: aquamarine;
+ fill: coral;
+ stroke: grey;
+ stroke-width: 2px;
+ }
+ text {
+ fill: slategrey;
+ font-size: 20px;
}
line {
- stroke: blueviolet;
+ stroke: slategrey;
}
</style>
-<svg width="960" height="600"></svg>
\ No newline at end of file
+<svg width="960" height="600">
+</svg>
\ No newline at end of file
diff --git a/src/js/visualizer/visualizer.js b/src/js/visualizer/visualizer.js
index f39a73e..e51434d 100644
--- a/src/js/visualizer/visualizer.js
+++ b/src/js/visualizer/visualizer.js
@@ -12,13 +12,25 @@ export class Visualizer {
var svg = d3.select("svg");
var width = +svg.attr("width");
var height = +svg.attr("height");
-
+ svg.append("svg:defs").selectAll("marker")
+ .data(["end"])
+ .enter().append("svg:marker")
+ .attr("id", String)
+ .attr("viewBox", "0 -5 10 10")
+ .attr("refX", 13)
+ .attr("refY", 0)
+ .attr("markerWidth", 13)
+ .attr("markerHeight", 13)
+ .attr("orient", "auto")
+ .attr('xoverflow','visible')
+ .append("svg:path")
+ .attr("d", "M0,-5L10,0L0,5");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) {
return d.id;
}))
.force('charge', d3.forceManyBody()
- .strength(0)
+ .strength(0.5)
.theta(1)
.distanceMax(10)
)
@@ -55,7 +67,8 @@ export class Visualizer {
.selectAll("line")
.data(graph.edges)
.enter()
- .append("line");
+ .append("line")
+ .attr("marker-end", "url(#end)");
var node = svg.append("g")
.attr("class", "nodes")
@@ -102,14 +115,12 @@ export class Visualizer {
});
node
- .attr("r", 10)
- .style("stroke", "#424242")
- .style("stroke-width", "2px")
+ .attr("r", 5)
.attr("cx", function (d) {
- return d.x + 3;
+ return d.x;
})
.attr("cy", function (d) {
- return d.y - 3;
+ return d.y;
});
label
@@ -118,8 +129,7 @@ export class Visualizer {
})
.attr("y", function (d) {
return d.y;
- })
- .style("font-size", "10px").style("fill", "#333");
+ });
}
}
--
GitLab