circles working

client/src/components/circle/LearningPathCircleDiagram.vue

@@ -123,106 +123,55 @@ export default {
   },
 
   mounted() {
-    function getPieDataForCircle(circle) {
-      return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
-    }
+
 
     console.log(this.circles)
 
-
-    const circleWidth = 150
+    const circleWidth = 200
     const radius = (circleWidth * 0.7) / 2
 
 
     // Create append pie charts to the main svg
-    const pie = this.svg.selectAll('.pie')
+    const circle_groups = this.svg.selectAll('.circle')
       .data(this.circles)
-
-    pie
       .enter()
       .append('g')
-      .attr('class', 'pie')
-      .attr('fill', 'red')
+      .attr('class', 'circle')
       .attr('transform', (d, i) => {
-        let x_coord = (i + 1) * circleWidth - radius + 100
-        return 'translate(' + x_coord + ', 40)'
+        let x_coord = (i + 1) * circleWidth - radius
+        return 'translate(' + x_coord + ', 150)'
       })
 
-    let g = this.svg.selectAll('.pie')
-      // .append('circle')
-      // .attr('r', d => {
-      //   return 30
-      // })
-      // .attr('fill', 'green')
-      // .attr('class', 'test')
 
 
-
-    //
-    // let g = this.svg.selectAll('g').data(d => {
-    //   if (d) {
-    //     console.log(d.pieData + 'sdfklm');
-    //     return d.pieData
-    //   } else {
-    //     console.log('sdf')
-    //     return []
-    //   }
-    // })
+    // Arc Generator
+    const arc = d3
+      .arc()
+      .innerRadius(radius / 2)
+      .padAngle(12 / 360)
+      .outerRadius(radius)
 
 
-    g.enter().append('g').attr('class', 'arc')
-
-    const arc = d3.arc()
-      .outerRadius(300)
-      .innerRadius(0);
-
-    g.append('path').attr('fill', 'red').attr('d', arc)
-
-
-
-    // //Generate groups
-    // const arcs = g
-    //   .selectAll('arc')
-    //   .data(pie([5, 5, 5, 5]))
-    //   .enter()
-    //   .append('path')
-    //   .attr('d', arc)
-
-    // const pies =  g.selectAll('arcs')
-    //   .data([1, 2, 3])
-    //   .enter()
-    //   .append('g')
-    //   .attr('cx', (d, i) => {
-    //     return (i + 1) * circleWidth - radius
-    //   })
-    //   .attr('cy', 150)
-    //   .attr('d', arcs)
-
-    const circles = this.svg
-      .selectAll('.blunt_circles')
-      .data(this.circles)
+//Generate groups
+    const arcs = this.svg
+      .selectAll('g')
+      .selectAll('.arc')
+      .data(d => { return d.pieData})
       .enter()
-      .append('circle')
-      .attr('class', 'blunt_circles')
-      .attr('cx', (d, i) => {
-        return (i + 1) * circleWidth - radius
-      })
-      .attr('cy', 150)
-      .attr('r', radius)
-     .attr('stroke', 'black')
+      .append('g')
+      .attr('class', 'arc')
 
-    const circlesText = this.svg
-      .selectAll('.circlesText')
-      .data(this.circles)
-      .enter()
+
+//Draw arc paths
+    arcs.append('path')
+      .attr('d', arc)
+
+    const circlesText = circle_groups
       .append('text')
-      .attr('x', (d, i) => {
-        return (i + 1) * circleWidth - radius
-      })
-      .attr('y', 150 + radius + 30)
       .attr('fill', '#00224D')
       .style('font-size', 19)
       .text((d) => d.title)
+      .attr('y', radius + 30)
       .attr('class', 'circlesText')
       .style('text-anchor', 'middle')