fixed topic line position

client/src/components/circle/LearningPathDiagram.vue

@@ -63,7 +63,6 @@ export default {
     circles() {
       if (this.learningPathStore.learningPath) {
         let internalCircles = this.learningPathStore.learningPath.circles;
-        // console.log(internalCircles);
         internalCircles.forEach((circle) => {
           let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
           let pieGenerator = d3.pie()
@@ -101,7 +100,6 @@ export default {
       sky500 = '#41B5FA'
 
     let vueRouter = this.$router
-    console.log('this.learningpath', this.learningPathStore.learningPath)
 
     // Create append pie charts to the main svg
     const circle_groups = this.svg
@@ -148,7 +146,7 @@ export default {
     const arcs = this.svg
       .selectAll('g')
       .selectAll('.learningSegmentArc')
-      .data((d) => {console.log('DDDD', d)
+      .data((d) => {
         return d.pieData
       })
       .enter()
@@ -178,14 +176,22 @@ export default {
       .call(wrap, circleWidth - 20)
 
 
+    function getTopicPosition(i, d, topics){
+      let x =0
+      for (let index=0; index < i; index++){
+        x += circleWidth * topics[index].circles.length
+      }
+      return x + 30
+    }
+
+
     const topicGroups = this.svg
       .selectAll('.topic')
       .data(this.learningPathStore.learningPath.topics)
       .enter()
       .append('g')
       .attr('transform', (d, i) => {
-        console.log(d)
-        return "translate(" + (i * circleWidth * d.circles.length + 30) + ",0)"
+        return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
       })
       .style("visibility", d => d.is_visible ? "visible" : "hidden")
       .attr('class', 'topic')