no chli figuretlet

server/vbv_lernwelt/templates/learnpath/circle.html

@@ -10,7 +10,20 @@
       <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
 
       <div class="flex justify-center">
-      	<svg width="400" height="400"> </svg>
+        <svg width="500" height="500">
+          <defs>
+            <marker id="triangle"
+                    viewBox="0 0 10 10"
+                    refX="5"
+                    refY="5"
+                    markerUnits="strokeWidth"
+                    markerWidth="10" markerHeight="10"
+                    orient="auto" overflow="visible" fill='#99C7E7'>
+              <path d="M -2 5 L 8 0 L 8 10 z"/>
+            </marker>
+
+          </defs>
+        </svg>
       </div>
       <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
       <div class="mt4">{{ page.description }}</div>
@@ -37,10 +50,11 @@
     var svg = d3.select("svg"),
       width = svg.attr("width"),
       height = svg.attr("height"),
-			radius = Math.min(width, height) / 2,
+      radius = Math.min(width, height) / 2.5,
       g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
-		var color = d3.scaleOrdinal(['#99C7E7']);
+
+    var color = '#99C7E7';
 
     // Generate the pie
     var pie = d3.pie();
@@ -51,6 +65,13 @@
       .padAngle(12 / 360)
       .outerRadius(radius);
 
+    // Generate the arrows
+    var arrow = d3.arc()
+      .innerRadius(radius * 1.15)
+      .padAngle(30 / 360)
+      .outerRadius(radius * 1.16);
+
+
     //Generate groups
     var arcs = g.selectAll("arc")
       .data(pie(data))
@@ -58,13 +79,28 @@
       .append("g")
       .attr("class", "arc")
 
+
+    //Generate groups
+    var arrows = g.selectAll("arrow")
+      .data(pie(data))
+      .enter()
+      .append("g")
+      .attr("class", "arrow")
+      .attr("marker-start", "url(#triangle)")
+
+
+    var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
+
+
     //Draw arc paths
     arcs.append("path")
-			.attr("fill", function(d, i) {
+      .attr("fill", color)
-				return color(i);
+      .attr("d", arc)
-			})
+
-			.attr("d", arc);
+    //Draw arrow paths
+    arrows.append("path")
+      .attr("fill", color)
+      .attr("d", arrow)
+
   </script>
-
-
 {% endblock %}