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