From e87967ccf341804bd8a27fcd566f2e65bb33643e Mon Sep 17 00:00:00 2001
From: "Wonko T. Sane" <42@wonko.de>
Date: Fri, 6 Mar 2020 18:40:22 +0100
Subject: [PATCH] fixed colors
---
index.html | 21 +++++++++++++--------
src/arrowonpath.js | 6 ++----
src/cyclicarrow.js | 1 +
3 files changed, 16 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index afc875b..00ae3f2 100644
--- a/index.html
+++ b/index.html
@@ -28,27 +28,32 @@
<script src="dist/d3-cyclicarrow.js"></script>
<script>
-
// Create dummy data
- var data = ["first", "second", "third", "fourth"];
+ var data = ["first", "second", "third", "fourth", "fifth"];
+
+ // set the color scale
+ var color = d3.scaleOrdinal(d3.schemeCategory10);
+
+
var arr = d3.cyclicarrow()(data);
- console.log(d3.entries(arr));
+
d3.svg('path.svg').then(function (svg) {
svgnode = document.importNode(svg.documentElement, true);
d3.select("div#arrows").node().append(svgnode);
svg = d3.select("div#arrows svg");
- console.log(svg);
+
svg.selectAll("whatever")
.data(arr)
.enter()
.append('path')
- .attr('d', d3.arrowonpath());
-
+ .attr('d', d3.arrowonpath())
+ .style('fill', function (d) { return (color(d.index)) })
+ .style("stroke", "black")
+ .style("stroke-width", "1")
+ .style("opacity", 1);
- //bh = d3.cyclicarrow()([]);
- //console.log(bh);
});
diff --git a/src/arrowonpath.js b/src/arrowonpath.js
index f7012ea..d9111cf 100644
--- a/src/arrowonpath.js
+++ b/src/arrowonpath.js
@@ -40,7 +40,7 @@ export default function () {
if (p1.x == p2.x && p1.y == p2.y) {
p1 = path.getPointAtLength(length - 0.01);
}
- console.log(p1, p2);
+
return Math.atan2((p2.y - p1.y), (p2.x - p1.x));
}
@@ -48,7 +48,7 @@ export default function () {
function pointsAt(length, angleoffset = 0) {
var m = path.getPointAtLength(length);
var m_angle = pointAngle(length + angleoffset)
- console.log("a", m_angle);
+
var a = {
x: m.x + (thickness * Math.cos(m_angle + angle))
, y: m.y + (thickness * Math.sin(m_angle + angle))
@@ -70,8 +70,6 @@ export default function () {
length = end - start,
partlen = (length - (2 * padding)) / (2 * parts);
- console.log("ArrowOnPath", start, end, partlen);
-
if (!context) context = buffer = d3.path();
var p = [pointsAt(start + padding, (-1 * padding))];
diff --git a/src/cyclicarrow.js b/src/cyclicarrow.js
index 2effe86..a258aaf 100644
--- a/src/cyclicarrow.js
+++ b/src/cyclicarrow.js
@@ -13,6 +13,7 @@ export default function () {
for (var i = 0; i < fractions; i++) {
segments[i] = {
+ index: i,
start: i * seg,
end: (i + 1) * seg
}
--
GitLab