Component | Chord Diagram | Adding labels event support

unovis/issues-only#12
f5 · Nov 21, 2023 · 8165cf5 · 8165cf5
1 parent d576856
commit 8165cf5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/ts/src/components/chord-diagram/index.ts b/packages/ts/src/components/chord-diagram/index.ts
@@ -71,6 +71,10 @@ export class ChordDiagram<
       mouseover: this._onLinkMouseOver.bind(this),
       mouseout: this._onLinkMouseOut.bind(this),
     },
+    [ChordDiagram.selectors.label]: {
+      mouseover: this._onNodeMouseOver.bind(this),
+      mouseout: this._onNodeMouseOut.bind(this),
+    },
   }
 
   private get _forceHighlight (): boolean {
@@ -208,11 +212,11 @@ export class ChordDiagram<
     // Labels
     const labelWidth = size - radius - config.nodeWidth
     const labels = this.labelGroup
-      .selectAll<SVGGElement, ChordNode<N>>(`.${s.gLabel}`)
+      .selectAll<SVGGElement, ChordNode<N>>(`.${s.label}`)
       .data(this._nodes, d => String(d.uid))
 
     const labelEnter = labels.enter().append('g')
-      .attr('class', s.gLabel)
+      .attr('class', s.label)
       .call(createLabel, config, this.radiusScale)
 
     const labelsMerged = labels.merge(labelEnter)

diff --git a/packages/ts/src/components/chord-diagram/modules/label.ts b/packages/ts/src/components/chord-diagram/modules/label.ts
@@ -83,7 +83,7 @@ export function createLabel<N extends ChordInputNode, L extends ChordInputLink>
     .attr('transform', d => getLabelTransform(d, config, radiusScale))
 
   selection.append('text')
-    .attr('class', s.label)
+    .attr('class', s.labelText)
     .style('fill', d => getColor(d.data, config.nodeColor, d.height))
 }
 
@@ -100,7 +100,7 @@ export function updateLabel<N extends ChordInputNode, L extends ChordInputLink>
     .attr('transform', d => getLabelTransform(d, config, radiusScale))
     .style('opacity', 1)
 
-  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.label}`)
+  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.labelText}`)
   label.select('textPath').remove()
   label
     .text(d => getString(d.data, nodeLabel))

diff --git a/packages/ts/src/components/chord-diagram/style.ts b/packages/ts/src/components/chord-diagram/style.ts
@@ -53,16 +53,15 @@ export const highlightedNode = css`
   stroke-width: 1.5;
 `
 
-export const gLabel = css`
-  label: group-label;
-`
-
 export const label = css`
   label: label;
+`
+
+export const labelText = css`
+  label: label-text:
 
   dominant-baseline: middle;
   user-select: none;
-  pointer-events: none;
 
   > textPath {
     dominant-baseline: central;