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

removed last arrow

This commit is contained in:
Lorenz Padberg 2022-06-28 14:59:57 +02:00
parent 9319aa2b16
commit 463fd5eee7
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/components/circle/CircleDiagram.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import * as d3 from "d3";
import {computed,ref, onMounted} from "vue";
import {onMounted, ref} from "vue";
import * as _ from 'underscore'
@ -74,7 +74,7 @@ function calculatePieData(circle) {
onMounted(async () => {
const root = ref(null)
console.log(root?.value)
console.log(root?.value)
let pieData = calculatePieData(props.circleData),
width = 450, //props.width,
height = 450, //props.height,
@ -139,13 +139,13 @@ onMounted(async () => {
//Generate groups
const wedgesGroup = g.selectAll('.learningSegmentArc').data(pieData).enter().append('g')
const learningSequences = g.selectAll('.learningSegmentArc').data(pieData).enter().append('g')
.attr('class', 'learningSegmentArc')
.attr('role', 'button')
.attr('fill', gray300)
wedgesGroup
learningSequences
.on('mouseover', function (d, i) {
d3.select(this)
.transition()
@ -154,16 +154,16 @@ onMounted(async () => {
return d.done ? sky400 : gray100
})
})
.on('mouseout', function (d, i) {
d3.select(this)
.transition()
.duration('200')
.attr('fill', (d) => {
return d.done ? sky500 : gray300
})
})
.on('mouseout', function (d, i) {
d3.select(this)
.transition()
.duration('200')
.attr('fill', (d) => {
return d.done ? sky500 : gray300
})
})
wedgesGroup
learningSequences
.transition()
.duration('1000')
.attr('fill', (d) => {
@ -171,10 +171,10 @@ onMounted(async () => {
})
wedgesGroup.append('path').attr('d', wedge)
learningSequences.append('path').attr('d', wedge)
const learningSequenceText = wedgesGroup
const learningSequenceText = learningSequences
.append('text')
.attr('fill', blue900)
.style('font-size', 15)
@ -191,7 +191,7 @@ onMounted(async () => {
const iconWidth = 25
const learningSequenceIcon = wedgesGroup.append("svg:image")
const learningSequenceIcon = learningSequences.append("svg:image")
.attr("xlink:href", (d) => {
return "/static/icons/" + d.icon.replace("it-", "") + ".svg"
})
@ -204,22 +204,31 @@ onMounted(async () => {
})
//Generate groups
const arrows = g
.selectAll('arrow')
.selectAll('.arrow')
.data(pieData)
.enter()
.append('g')
.attr('class', 'arrow')
.attr('marker-end', 'url(#triangle)')
//arrows[3].remove()
d3.selection.prototype.last = function () {
console.log('last', this)
let last = this.size() - 1;
return d3.select(this.nodes()[last]);
};
const all_arows = g.selectAll('.arrow')
all_arows.last().remove()
//Draw arrow paths
arrows.append('path').attr('fill', gray500).attr('d', arrow)
}
);