added arrows correctly

client/src/components/circle/CircleDiagram.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {useCircleStore} from '@/stores/circle';
 import {onMounted} from "vue";
 import * as _ from 'underscore'
 
@@ -52,8 +51,10 @@ const props = defineProps<{
 }>()
 
 
-function calculatePieData(circle){
+function calculatePieData(circle) {
-        let learningSequences = _.filter(circle.children, (child) => { return child.type === 'learnpath.LearningSequence'; })
+  let learningSequences = _.filter(circle.children, (child) => {
+    return child.type === 'learnpath.LearningSequence';
+  })
   let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
   let pieGenerator = d3.pie()
   let pieData = pieGenerator(pieWeights)
@@ -63,6 +64,8 @@ function calculatePieData(circle){
     pie.icon = learningSequences[parseInt(pie.index)].icon
     pie.startAngle = pie.startAngle + Math.PI
     pie.endAngle = pie.endAngle + Math.PI
+    pie.arrowStartAngle = pie.endAngle + (pie.startAngle- pie.endAngle) / 2
+    pie.arrowEndAngle = pie.startAngle + (pie.startAngle- pie.endAngle) / 2
   })
   pieData = pieData.reverse()
   return pieData
@@ -71,7 +74,6 @@ function calculatePieData(circle){
 onMounted(async () => {
 
 
-
     let pieData = calculatePieData(props.circleData)
 
     const width = 500,
@@ -93,6 +95,22 @@ onMounted(async () => {
 
     const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
+    const arrowStrokeWidth = 2
+
+    svg.append("svg:defs").append("svg:marker")
+      .attr("id", "triangle")
+      .attr("refX", 11)
+      .attr("refY", 11)
+      .attr("markerWidth", 20)
+      .attr("markerHeight", 20)
+      .attr("markerUnits", "userSpaceOnUse")
+      .attr("orient", "auto")
+      .append("path")
+      .attr("d", "M -1 0 l 10 0 M 0 -1 l 0 10")
+      .attr('transform', 'rotate(-90, 10, 0)')
+      .attr('stroke-width', arrowStrokeWidth)
+      .attr('stroke', gray500)
+
     // Generate the pie
     const pie = d3.pie()
 
@@ -103,19 +121,21 @@ onMounted(async () => {
       .padAngle(12 / 360)
       .outerRadius(radius)
 
-
-
     // Generate the arrows
+    const arrowRadius = radius * 1.1
+
     const arrow = d3
       .arc()
-    .innerRadius(radius * 1.15)
+      .innerRadius(arrowRadius)
+      .outerRadius(arrowRadius + arrowStrokeWidth)
       .padAngle(30 / 360)
-    .startAngle(d => {return d.startAngle + (d.startAngle - d.endAngle)/2})
+      .startAngle(d => {return d.arrowStartAngle})
-    .endAngle(d => {return d.endAngle + (d.startAngle - d.endAngle)/2})
+      .endAngle(d => {return d.arrowEndAngle})
-    .outerRadius(radius * 1.165)
+
 
     //Generate groups
     const wedgesGroup = g.selectAll('arc').data(pieData).enter().append('g').attr('class', 'arc')
+
     wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)
 
 
@@ -123,22 +143,30 @@ onMounted(async () => {
       .append('text')
       .attr('fill', blue900)
       .style('font-size', 15)
-      .text((d) => {return d.title})
+      .text((d) => {
-      .attr("transform", function(d) {
+        return d.title
+      })
+      .attr("transform", function (d) {
         let translate = wedge.centroid(d)
         translate = [translate[0], translate[1] + 20]
-        return "translate(" + translate + ")";  })
+        return "translate(" + translate + ")";
+      })
       .attr('class', 'circlesText text-xl font-bold')
       .style('text-anchor', 'middle')
 
+    const iconWidth = 25
+
     const learningSequenceIcon = wedgesGroup.append("svg:image")
-        .attr("xlink:href", (d) => {return "/static/icons/"+d.icon.replace("it-", "")+".svg"})
+      .attr("xlink:href", (d) => {
-        .attr("width", 30)
+        return "/static/icons/" + d.icon.replace("it-", "") + ".svg"
-        .attr("height", 30)
+      })
-        .attr("transform", function(d) {
+      .attr("width", iconWidth)
+      .attr("height", iconWidth)
+      .attr("transform", function (d) {
         let translate = wedge.centroid(d)
-        translate = [translate[0]-20, translate[1] - 35]
+        translate = [translate[0] - iconWidth/2, translate[1] - iconWidth]
-        return "translate(" + translate + ")";  })
+        return "translate(" + translate + ")";
+      })
 
 
     //Generate groups
@@ -148,16 +176,24 @@ onMounted(async () => {
       .enter()
       .append('g')
       .attr('class', 'arrow')
-    .attr('marker-start', 'url(#triangle)')
+      .attr('marker-end', 'url(#triangle)')
 
-  const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
+    //arrows[3].remove()
-
-  //Draw wedge paths
 
 
     //Draw arrow paths
-  arrows.append('path').attr('fill', gray300).attr('d', arrow)
+    arrows.append('path').attr('fill', gray500).attr('d', arrow)
-}
+    //   .transition()
+    //   .duration(500)
+    //   .delay(function (d, i) {return i * 200;})
+    //   .attrTween('d', function (d) {
+    //   var i = d3.interpolate(d.arrowStartAngle, d.arrowEndAngle);
+    //   return function (t) {
+    //     d.arrowEndAngle = i(t);
+    //     return d;
+    //   }
+    // })
+  }
 );