Tweening the arcs

Author: emeeks

package-lock.json

@@ -156,7 +156,7 @@
     "raf": "3.4.0",
     "react-annotation": "1.3.1",
     "roughjs-es5": "0.1.0",
-    "semiotic-mark": "0.2.12",
+    "semiotic-mark": "0.3.0",
     "svg-path-bounding-box": "1.0.4",
     "whatwg-fetch": "2.0.3"
   },

package.json

@@ -1445,7 +1445,7 @@ class NetworkFrame extends React.Component<Props, State> {
     }
 
     const nodeLabelAnnotations = []
-    if (this.props.nodeLabels && projectedNodes) {
+    if (currentProps.nodeLabels && projectedNodes) {
       projectedNodes.forEach((node, nodei) => {
         if (nodeLabels === true || (nodeLabels && nodeLabels(node, nodei))) {
           const actualLabel =

src/components/NetworkFrame.js

@@ -3,9 +3,39 @@ import React from "react"
 import { select } from "d3-selection"
 import { arc, line, curveLinearClosed } from "d3-shape"
 import { Mark } from "semiotic-mark"
+import { interpolateNumber } from "d3-interpolate"
 
 const twoPI = Math.PI * 2
 
+export const arcTweener = (oldProps, newProps) => {
+  const innerRadiusInterpolator = interpolateNumber(
+    oldProps.innerRadius,
+    newProps.innerRadius
+  )
+  const outerRadiusInterpolator = interpolateNumber(
+    oldProps.outerRadius,
+    newProps.outerRadius
+  )
+  const startAngleInterpolator = interpolateNumber(
+    oldProps.startAngle,
+    newProps.startAngle
+  )
+  const endAngleInterpolator = interpolateNumber(
+    oldProps.endAngle,
+    newProps.endAngle
+  )
+
+  return t => {
+    const sliceGenerator = arc()
+      .innerRadius(innerRadiusInterpolator(t))
+      .outerRadius(outerRadiusInterpolator(t))
+    return sliceGenerator({
+      startAngle: startAngleInterpolator(t),
+      endAngle: endAngleInterpolator(t)
+    })
+  }
+}
+
 export const drawAreaConnector = ({
   x1,
   x2,
@@ -71,10 +101,10 @@ export const hexToRgb = hex => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result
     ? [
-      parseInt(result[1], 16),
-      parseInt(result[2], 16),
-      parseInt(result[3], 16)
-    ]
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16)
+      ]
     : [0, 0, 0]
 }
 

src/components/svg/SvgHelper.js

@@ -12,6 +12,8 @@ import { interpolateNumber } from "d3-interpolate"
 
 import { scaleLinear } from "d3-scale"
 
+import { arcTweener } from "./SvgHelper"
+
 function sankeyEdgeSort(a, b, direction) {
   if (a.circular && !b.circular) return -1
   if (b.circular && !a.circular) return 1
@@ -223,6 +225,15 @@ export const radialRectNodeGenerator = (size, center, type) => {
           startAngle: adjustedPct(d.x0 / size[0]) * Math.PI * 2,
           endAngle: adjustedPct(d.x1 / size[0]) * Math.PI * 2
         })}
+        customTween={{
+          fn: arcTweener,
+          props: {
+            startAngle: adjustedPct(d.x0 / size[0]) * Math.PI * 2,
+            endAngle: adjustedPct(d.x1 / size[0]) * Math.PI * 2,
+            innerRadius: d.y0 / 2,
+            outerRadius: d.y1 / 2
+          }
+        }}
         style={styleFn(d, i)}
         renderMode={renderMode ? renderMode(d, i) : undefined}
         className={className}

src/components/svg/networkDrawing.js

@@ -4,6 +4,7 @@ import { /*area, curveCatmullRom,*/ arc } from "d3-shape"
 import pathBounds from "svg-path-bounding-box"
 import { Mark } from "semiotic-mark"
 import { scaleLinear } from "d3-scale"
+import { arcTweener } from "./SvgHelper"
 
 const twoPI = Math.PI * 2
 
@@ -72,7 +73,6 @@ const radialBarFeatureGenerator = ({
       : Math.max(startAngle, startAngle + angle - ordset.pct_padding / 2)
 
   const startAngleFinal = startAngle * twoPI
-
   const endAngleFinal = endAngle * twoPI
 
   const markD = arcGenerator({
@@ -115,7 +115,16 @@ const radialBarFeatureGenerator = ({
       d: markD,
       tx: xOffset,
       ty: yOffset,
-      transform: translate
+      transform: translate,
+      customTween: {
+        fn: arcTweener,
+        props: {
+          startAngle: startAngleFinal,
+          endAngle: endAngleFinal,
+          innerRadius: innerSize,
+          outerRadius: outerSize
+        }
+      }
     }
   }
 }

src/components/svg/pieceLayouts.js

@@ -75,6 +75,13 @@ export default class PieDonutDocs extends React.Component {
             {paddingOptions}
           </Select>
         </FormControl>
+      </div>,
+      <div key="button-3">
+        <button
+          onClick={() => this.setState({ changeData: !this.state.changeData })}
+        >
+          Change Data
+        </button>
       </div>
     ]
 

src/docs/components/DonutChart.js

@@ -4,11 +4,12 @@ import ProcessViz from "./ProcessViz"
 
 const colors = ["#00a2ce", "#4d430c", "#b3331d", "#b6a756"]
 const data = [5, 8, 10, 15]
+const data2 = [15, 8, 5, 10]
 
 export default state => {
   const donutSettings = {
     size: [400, 400],
-    data: data,
+    data: state.changeData ? data2 : data,
     projection: "radial",
     style: (d, i) => ({
       fill: colors[i],

src/docs/components/DonutChartRaw.js

@@ -1,30 +1,36 @@
-import React from 'react'
-import DocumentComponent from '../layout/DocumentComponent'
-import SunburstRaw from './SunburstRaw'
-
+import React from "react"
+import DocumentComponent from "../layout/DocumentComponent"
+import SunburstRaw from "./SunburstRaw"
 const components = []
 
 components.push({
-  name: 'Sunburst'
+  name: "Sunburst"
 })
 
 export default class Sunburst extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      type: 'partition',
-      projection: 'radial'
+      type: "partition",
+      projection: "radial"
     }
   }
   render() {
-    const buttons = []
+    const buttons = [
+      <button
+        key="button"
+        onClick={() => this.setState({ zoom: !this.state.zoom })}
+      >
+        Zoom
+      </button>
+    ]
 
     const examples = []
 
     examples.push({
-      name: 'Basic',
-      demo: SunburstRaw,
+      name: "Basic",
+      demo: SunburstRaw(this.state.zoom),
       source: `
       const data = {
         name: "flare",
@@ -88,4 +94,4 @@ export default class Sunburst extends React.Component {
   }
 }
 
-Sunburst.title = 'Sunburst'
+Sunburst.title = "Sunburst"

src/docs/components/Sunburst.js

@@ -44,9 +44,12 @@ const sunburstSettings = {
   margin: 10,
   filterRenderedNodes: d => d.depth !== 0
 }
-export default (
+export default zoom => (
   <div>
     <ProcessViz frameSettings={sunburstSettings} frameType="NetworkFrame" />
-    <NetworkFrame {...sunburstSettings} />
+    <NetworkFrame
+      {...sunburstSettings}
+      edges={zoom ? { name: "flare", children: [data.children[9]] } : data}
+    />
   </div>
 )