fixed colors

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);
         });
 
 

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))];

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
       }