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

add hover transition

This commit is contained in:
Lorenz Padberg 2022-06-28 14:34:09 +02:00
parent e8dcd231f2
commit 9319aa2b16
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
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 {onMounted} from "vue"; import {computed,ref, onMounted} from "vue";
import * as _ from 'underscore' import * as _ from 'underscore'
@ -66,20 +66,19 @@ function calculatePieData(circle) {
pie.endAngle = pie.endAngle + Math.PI pie.endAngle = pie.endAngle + Math.PI
pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2 pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2 pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
pie.done = false pie.done = true
}) })
pieData = pieData.reverse() pieData = pieData.reverse()
return pieData return pieData
} }
onMounted(async () => { onMounted(async () => {
const root = ref(null)
console.log(root?.value)
let pieData = calculatePieData(props.circleData) let pieData = calculatePieData(props.circleData),
width = 450, //props.width,
const width = 500, height = 450, //props.height,
height = 500, radius: number = Math.min(width, height) / 2.4
radius = Math.min(width, height) / 3
const blue900 = '#00224D', const blue900 = '#00224D',
blue700 = '#1A5197', blue700 = '#1A5197',
@ -140,13 +139,31 @@ onMounted(async () => {
//Generate groups //Generate groups
const wedgesGroup = g.selectAll('learningSegmentArc').data(pieData).enter().append('g') const wedgesGroup = 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
wedgesGroup
.on('mouseover', function (d, i) {
d3.select(this)
.transition()
.duration('200')
.attr('fill', (d) => {
return d.done ? sky400 : gray100
})
})
.on('mouseout', function (d, i) {
d3.select(this)
.transition()
.duration('200')
.attr('fill', (d) => {
return d.done ? sky500 : gray300
})
})
wedgesGroup
.transition() .transition()
.duration('1000') .duration('1000')
.attr('fill', (d) => { .attr('fill', (d) => {
@ -187,6 +204,7 @@ onMounted(async () => {
}) })
//Generate groups //Generate groups
const arrows = g const arrows = g
.selectAll('arrow') .selectAll('arrow')
@ -201,16 +219,7 @@ onMounted(async () => {
//Draw arrow paths //Draw arrow paths
arrows.append('path').attr('fill', gray500).attr('d', arrow) arrows.append('path').attr('fill', gray500).attr('d', arrow)
// .transition()
// .duration(500)
// .delay(function (d, i) {return i * 200;})
// .attrTween('d', function (d) {
// var i = d3.interpolate(d.arrowStartAngle, d.arrowEndAngle);
// return function (t) {
// d.arrowEndAngle = i(t);
// return d;
// }
// })
} }
); );