调整&优化

src/components/d3.vue

@@ -4,8 +4,7 @@
 
 <script>
 import RelationGraph from '@/util/useD3.js'
-import { ref } from '@vue/reactivity'
-import { nextTick, onMounted, watch } from '@vue/runtime-core'
+import { nextTick, onMounted, watch, ref } from 'vue'
 export default {
   name: 'D3',
   props: {
@@ -44,13 +43,21 @@ export default {
 </script>
 
 <style lang="stylus">
-.relation-tooltip {
-  position: fixed;
-  padding: 0.5rem 1rem;
-  background-color: rgba(0,0,0,0.5);
-  border-radius: 0.5rem;
-  color: #fff;
-  backdrop-filter: blur(0.5rem);
-  -webkit-backdrop-filter: blur(0.5rem);
-}
+.relation-tooltip
+  position fixed
+  padding 0.5rem 1rem
+  background-color rgba(0,0,0,0.5)
+  border-radius 0.3rem
+  color #fff
+  backdrop-filter blur(0.5rem)
+  -webkit-backdrop-filter blur(0.5rem)
+
+.menu-segment
+  cursor pointer
+  fill #2c3e50
+  &:hover
+    fill #58b2dc
+
+.menu-icon
+  pointer-events none
 </style>

src/components/main.vue

 <template>
   <D3
-    :data="data"
+    :data="mockData"
     :config="config"
     style="background: #fff; width: 100%; height: 100vh"
   />
@@ -10,37 +10,20 @@
 import D3 from './d3.vue'
 import mockData from '@/util/mock.js'
 import { ref } from 'vue'
-import RadialMenu from '@/util/menu.js'
 
 export default {
   name: 'Main',
   components: { D3 },
   setup() {
-    const data = ref(mockData)
     const config = ref({
       config: {
         strokeColor: 'skyblue',
       },
     })
     return {
-      data,
+      mockData,
       config,
     }
   },
 }
 </script>
-
-<style lang="stylus">
-.menu-segment {
-  cursor: pointer;
-  fill: #2c3e50;
-}
-
-.menu-segment:hover {
-  fill: #58b2dc;
-}
-
-.menu-icon {
-  pointer-events: none;
-}
-</style>

src/util/menu.js

@@ -9,15 +9,12 @@ export default function RadialMenu() {
   //#region Local Variables
 
   // The following variables have getter/setter functions exposed so are configurable
-  let data = [{}]
+  const data = [{}]
   let padding = 1
   let radius = 50
   let thickness = 20
   let iconSize = 16
   let animationDuration = 250 // The duration to run animations for
-  let onClick = function (a) {
-    alert(a)
-  }
 
   // Private Variables
   let offsetAngleDeg = -180 / data.length // Initial rotation angle designed to put centre the first segment at the top
@@ -28,19 +25,6 @@ export default function RadialMenu() {
 
   //#endregion
 
-  //#region Getter/Setter Accessors
-
-  /**
-   * The function to execute on a menu click
-   * @param {object} onClick - The function to execute on a menu click
-   * @returns {number} The function to execute on a menu click or the control
-   */
-  control.onClick = function (_) {
-    if (!arguments.length) return onClick
-    onClick = _
-    return control
-  }
-
   /**
    * Time in ms to animate transitions
    * @param {object} animationDuration - The time in ms to animate transitions
@@ -124,9 +108,7 @@ export default function RadialMenu() {
     // Create pie layout
     pie = d3
       .pie()
-      .value(function (d) {
-        return data.length
-      })
+      .value(data.length)
       .padAngle((padding * Math.PI) / 180)
 
     // Create the arc function
@@ -142,12 +124,9 @@ export default function RadialMenu() {
    * @returns {object} The control
    */
   control.appendTo = function (target) {
-    // Convert the target into a valid D3 selection
-    // that we can append our menu into
-    target = d3.select(target)
-
     // Create the visualiziation
-    segmentLayer = target
+    segmentLayer = d3
+      .select(target)
       .append('g')
       .attr('transform', 'rotate(' + offsetAngleDeg + ')')
 
@@ -158,10 +137,9 @@ export default function RadialMenu() {
    * Display the menu
    * @returns {object} The control
    */
-  control.show = function (_) {
+  control.show = function (data) {
     // Calculate the new offset angle based on the number of data items and
     // then rotate the menu to re-centre the first segment
-    data = _
     offsetAngleDeg = -180 / data.length
     segmentLayer.attr('transform', 'rotate(' + offsetAngleDeg + ')')
 
@@ -219,7 +197,8 @@ export default function RadialMenu() {
         this._current = d
       }) // store the initial data value for later
       .on('click', function (e, d) {
-        console.log(d.data.action)
+        const { action } = d.data
+        action && action(e, d)
       })
       .transition()
       .duration(animationDuration)
@@ -299,11 +278,14 @@ export default function RadialMenu() {
           return arc.innerRadius(innerTween(t)).outerRadius(outerTween(t))(a)
         }
       })
-    // .each('end', function (d) {
-    //   dataJoin.remove() // Remove all of the segment groups once the transition has completed
-    // })
-    dataJoin.remove()
-    segmentLayer.remove()
+      .remove()
+
+    let timer = setTimeout(() => {
+      segmentLayer.remove()
+      clearTimeout(timer)
+      timer = null
+    }, animationDuration + 100)
+
     return control
   }