ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

circles working

This commit is contained in:
Lorenz Padberg 2022-06-15 14:12:50 +02:00
parent 21f69338b6
commit b24bbc3f62
1 changed files with 26 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
client/src/components/circle/LearningPathCircleDiagram.vue
View File

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