fixed topic line position

This commit is contained in:
Lorenz Padberg 2022-07-04 18:29:59 +02:00
parent abea407523
commit 1699852eda
1 changed files with 11 additions and 5 deletions

View File

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