Component | Chord: Fix link value zero issue, add handle to 0, null and undefined cases

Author: lee00678

packages/dev/src/examples/networks-and-flows/chord-diagram/chord-diagram-zero-value-link/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { VisSingleContainer, VisChordDiagram } from '@unovis/react'
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+
+export const title = 'Chord Diagram Zero Value Link'
+export const subTitle = 'External select node'
+
+const data = {
+  nodes: Array(5).fill(0).map((_, i) => ({ id: String.fromCharCode(i + 65) })),
+  links: [
+    { source: 'A', target: 'B', value: undefined },
+    { source: 'A', target: 'D', value: null },
+    { source: 'B', target: 'E', value: 0 },
+    { source: 'B', target: 'D', value: null },
+    { source: 'C', target: 'D', value: 0 },
+    { source: 'D', target: 'A', value: 1 },
+    { source: 'D', target: 'E', value: 0 },
+  ],
+}
+
+export const component = (props: ExampleViewerDurationProps): React.ReactNode => {
+  return (
+    <>
+      <VisSingleContainer data={data} height={600}>
+        <VisChordDiagram
+          nodeLabelAlignment='perpendicular'
+          nodeLabel={React.useCallback((d: { id: string }) => `Segment ${d.id}`, [])}
+          padAngle={0.75}
+          duration={props.duration}
+        />
+      </VisSingleContainer>
+    </>
+  )
+}

packages/ts/src/components/chord-diagram/index.ts

@@ -126,7 +126,8 @@ export class ChordDiagram<
   }
 
   _layoutData (): void {
-    const { nodes, links } = this.datamodel
+    const { nodes } = this.datamodel
+    let { links } = this.datamodel
     const { padAngle, linkValue, nodeLevels } = this.config
     nodes.forEach(n => { delete n._state.value })
     links.forEach(l => {
@@ -136,6 +137,7 @@ export class ChordDiagram<
       l.target._state.value = (l.target._state.value || 0) + getNumber(l, linkValue)
     })
 
+    links = links.filter(d => d._state.value)
     const root = getHierarchyNodes(nodes, d => d._state?.value, nodeLevels)
 
     const partitionData = partition().size([this.config.angleRange[1], 1])(root) as ChordNode<N>