Sunburst Labels and filterRenderedNodes

emeeks · emeeks · commit 11faf9a38359 · 2018-08-08T09:40:39.000-07:00
diff --git a/src/components/NetworkFrame.js b/src/components/NetworkFrame.js
@@ -40,7 +40,8 @@ import {
   circleNodeGenerator,
   areaLink,
   ribbonLink,
-  circularAreaLink
+  circularAreaLink,
+  radialLabelGenerator
 } from "./svg/networkDrawing"
 
 import { stringToFn } from "./data/dataFunctions"
@@ -190,11 +191,11 @@ function determineNodeIcon(baseCustomNodeIcon, networkSettings, size) {
       return sankeyNodeGenerator
     case "partition":
       return networkSettings.projection === "radial"
-        ? radialRectNodeGenerator(size, center)
+        ? radialRectNodeGenerator(size, center, networkSettings)
         : hierarchicalRectNodeGenerator
     case "treemap":
       return networkSettings.projection === "radial"
-        ? radialRectNodeGenerator(size, center)
+        ? radialRectNodeGenerator(size, center, networkSettings)
         : hierarchicalRectNodeGenerator
     case "circlepack":
       return circleNodeGenerator
@@ -450,7 +451,8 @@ type Props = {
   onNodeOut?: Function,
   onNodeClick?: Function,
   onNodeEnter?: Function,
-  renderOrder?: $ReadOnlyArray<"edges" | "nodes">
+  renderOrder?: $ReadOnlyArray<"edges" | "nodes">,
+  filterRenderedNodes: Function
 }
 
 class NetworkFrame extends React.Component<Props, State> {
@@ -461,7 +463,8 @@ class NetworkFrame extends React.Component<Props, State> {
     size: [500, 500],
     className: "",
     name: "networkframe",
-    networkType: { type: "force", iterations: 500 }
+    networkType: { type: "force", iterations: 500 },
+    filterRenderedNodes: () => true
   }
 
   static displayName = "NetworkFrame"
@@ -579,7 +582,8 @@ class NetworkFrame extends React.Component<Props, State> {
       margin: baseMargin,
       hoverAnnotation,
       customNodeIcon: baseCustomNodeIcon,
-      customEdgeIcon: baseCustomEdgeIcon
+      customEdgeIcon: baseCustomEdgeIcon,
+      filterRenderedNodes
     } = currentProps
 
     let { edgeType } = currentProps
@@ -865,11 +869,14 @@ class NetworkFrame extends React.Component<Props, State> {
           radialProjectable[networkSettings.type] &&
           networkSettings.projection === "radial"
         ) {
-          const radialPoint = pointOnArcAtAngle(
-            [adjustedSize[0] / 2, adjustedSize[1] / 2],
-            node.x / adjustedSize[0],
-            node.y / 2
-          )
+          const radialPoint =
+            node.depth === 0
+              ? [adjustedSize[0] / 2, adjustedSize[1] / 2]
+              : pointOnArcAtAngle(
+                  [adjustedSize[0] / 2, adjustedSize[1] / 2],
+                  node.x / adjustedSize[0],
+                  node.y / 2
+                )
           node.x = radialPoint[0]
           node.y = radialPoint[1]
         } else {
@@ -1285,6 +1292,14 @@ class NetworkFrame extends React.Component<Props, State> {
       this.state.graphSettings.edges = currentProps.edges
     }
 
+    //filter out user-defined nodes
+    projectedNodes = projectedNodes.filter(filterRenderedNodes)
+    projectedEdges = projectedEdges.filter(
+      d =>
+        projectedNodes.indexOf(d.target) !== -1 &&
+        projectedNodes.indexOf(d.source) !== -1
+    )
+
     if (networkSettings.direction === "flip") {
       projectedNodes.forEach(node => {
         // const ox = node.x
@@ -1320,8 +1335,9 @@ class NetworkFrame extends React.Component<Props, State> {
       networkSettings.type !== "wordcloud" &&
       networkSettings.type !== "chord" &&
       networkSettings.type !== "sankey" &&
-      (hierarchicalTypeHash[networkSettings.type] === undefined ||
-        networkSettings.nodeSize)
+      networkSettings.type !== "partition" &&
+      networkSettings.type !== "treemap" &&
+      networkSettings.type !== "circlepack"
     ) {
       const xMin = min(projectedNodes.map(p => p.x - nodeSizeAccessor(p)))
       const xMax = max(projectedNodes.map(p => p.x + nodeSizeAccessor(p)))
@@ -1330,13 +1346,38 @@ class NetworkFrame extends React.Component<Props, State> {
 
       const projectionScaleX = scaleLinear()
         .domain([xMin, xMax])
-        .range([0, adjustedSize[0]])
+        .range([margin.left, adjustedSize[0] - margin.right])
+      const projectionScaleY = scaleLinear()
+        .domain([yMin, yMax])
+        .range([margin.top, adjustedSize[1] - margin.bottom])
+      projectedNodes.forEach(node => {
+        node.x = projectionScaleX(node.x)
+        node.y = projectionScaleY(node.y)
+      })
+    } else if (
+      networkSettings.zoom !== false &&
+      networkSettings.projection !== "radial" &&
+      (networkSettings.type === "partition" ||
+        networkSettings.type === "treemap")
+    ) {
+      const xMin = min(projectedNodes.map(p => p.x0))
+      const xMax = max(projectedNodes.map(p => p.x1))
+      const yMin = min(projectedNodes.map(p => p.y0))
+      const yMax = max(projectedNodes.map(p => p.y1))
+
+      const projectionScaleX = scaleLinear()
+        .domain([xMin, xMax])
+        .range([margin.left, adjustedSize[0] - margin.right])
       const projectionScaleY = scaleLinear()
         .domain([yMin, yMax])
-        .range([0, adjustedSize[1]])
+        .range([margin.top, adjustedSize[1] - margin.bottom])
       projectedNodes.forEach(node => {
         node.x = projectionScaleX(node.x)
         node.y = projectionScaleY(node.y)
+        node.x0 = projectionScaleX(node.x0)
+        node.y0 = projectionScaleY(node.y0)
+        node.x1 = projectionScaleX(node.x1)
+        node.y1 = projectionScaleY(node.y1)
       })
     }
 
@@ -1408,9 +1449,17 @@ class NetworkFrame extends React.Component<Props, State> {
       projectedNodes.forEach((node, nodei) => {
         if (nodeLabels === true || (nodeLabels && nodeLabels(node, nodei))) {
           const actualLabel =
-            nodeLabels === true
-              ? nodeIDAccessor(node, nodei)
-              : nodeLabels(node, nodei)
+            networkSettings.projection === "radial" && node.depth !== 0
+              ? radialLabelGenerator(
+                  node,
+                  nodei,
+                  nodeLabels === true ? nodeIDAccessor : nodeLabels,
+                  adjustedSize,
+                  networkSettings
+                )
+              : nodeLabels === true
+                ? nodeIDAccessor(node, nodei)
+                : nodeLabels(node, nodei)
 
           let nodeLabel
 
diff --git a/src/components/annotationRules/networkframeRules.js b/src/components/annotationRules/networkframeRules.js
@@ -143,14 +143,23 @@ export const svgRectEncloseRule = ({
   }
 
   const bboxNodes = selectedNodes.map(p => {
+    if (p.shapeNode) {
+      return {
+        x0: p.x0,
+        x1: p.x1,
+        y0: p.y0,
+        y1: p.y1
+      }
+    }
     const nodeSize = nodeSizeAccessor(p)
     return {
-      x0: p.x0 === p.shapeNode ? p.x0 : p.x - nodeSize,
-      x1: p.x1 === p.shapeNode ? p.x1 : p.x + nodeSize,
-      y0: p.y0 === p.shapeNode ? p.y0 : p.y - nodeSize,
-      y1: p.y1 === p.shapeNode ? p.y1 : p.y + nodeSize
+      x0: p.x - nodeSize,
+      x1: p.x + nodeSize,
+      y0: p.y - nodeSize,
+      y1: p.y + nodeSize
     }
   })
+
   return rectangleEnclosure({ bboxNodes, d, i })
 }
 
diff --git a/src/components/constants/frame_props.js b/src/components/constants/frame_props.js
@@ -329,7 +329,8 @@ export const networkframeproptypes = {
   edgeStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   customNodeIcon: PropTypes.func,
   zoomToFit: PropTypes.bool,
-  edgeType: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+  edgeType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  filterRenderedNodes: PropTypes.func
 }
 
 export const responsiveprops = {
diff --git a/src/components/svg/networkDrawing.js b/src/components/svg/networkDrawing.js
@@ -10,6 +10,8 @@ import { arc } from "d3-shape"
 import { linearRibbon } from "./SvgHelper"
 import { interpolateNumber } from "d3-interpolate"
 
+import { scaleLinear } from "d3-scale"
+
 function sankeyEdgeSort(a, b, direction) {
   if (a.circular && !b.circular) return -1
   if (b.circular && !a.circular) return 1
@@ -195,8 +197,19 @@ export const chordNodeGenerator = size => ({
   />
 )
 
-export const radialRectNodeGenerator = (size, center) => {
+export const radialRectNodeGenerator = (size, center, type) => {
   const radialArc = arc()
+  const { angleRange = [0, 360] } = type
+  const rangePct = angleRange.map(d => d / 360)
+  const rangeMod = rangePct[1] - rangePct[0]
+
+  const adjustedPct =
+    rangeMod < 1
+      ? scaleLinear()
+          .domain([0, 1])
+          .range(rangePct)
+      : d => d
+
   return ({ d, i, styleFn, renderMode, key, className, baseMarkProps }) => {
     radialArc.innerRadius(d.y0 / 2).outerRadius(d.y1 / 2)
 
@@ -207,8 +220,8 @@ export const radialRectNodeGenerator = (size, center) => {
         transform={`translate(${center})`}
         markType="path"
         d={radialArc({
-          startAngle: (d.x0 / size[0]) * Math.PI * 2,
-          endAngle: (d.x1 / size[0]) * Math.PI * 2
+          startAngle: adjustedPct(d.x0 / size[0]) * Math.PI * 2,
+          endAngle: adjustedPct(d.x1 / size[0]) * Math.PI * 2
         })}
         style={styleFn(d, i)}
         renderMode={renderMode ? renderMode(d, i) : undefined}
@@ -220,6 +233,24 @@ export const radialRectNodeGenerator = (size, center) => {
   }
 }
 
+export const radialLabelGenerator = (node, nodei, nodeIDAccessor, size) => {
+  const anglePct = (node.x1 + node.x0) / 2 / size[0]
+  const nodeLabel = nodeIDAccessor(node, nodei)
+  const labelRotate = anglePct > 0.5 ? anglePct * 360 + 90 : anglePct * 360 - 90
+
+  return (
+    <g transform={`rotate(${labelRotate})`}>
+      {typeof nodeLabel === "string" ? (
+        <text textAnchor="middle" y={5}>
+          {nodeLabel}
+        </text>
+      ) : (
+        nodeLabel
+      )}
+    </g>
+  )
+}
+
 export const hierarchicalRectNodeGenerator = ({
   d,
   i,
diff --git a/src/docs/components/Dendrogram.js b/src/docs/components/Dendrogram.js
@@ -17,9 +17,10 @@ export default class Dendrogram extends React.Component {
     super(props)
 
     this.state = {
-      type: "circlepack",
+      type: "treemap",
       projection: "vertical",
-      annotation: "rectangle"
+      annotation: "rectangle",
+      filter: "none"
     }
   }
   render() {
@@ -48,6 +49,12 @@ export default class Dendrogram extends React.Component {
       </MenuItem>
     ))
 
+    const filterOptions = ["none", "time", "layout", "geo"].map(d => (
+      <MenuItem key={`type-option-${d}`} label={d} value={d}>
+        {d}
+      </MenuItem>
+    ))
+
     const buttons = [
       <FormControl key="button-1-0-0">
         <InputLabel htmlFor="chart-type-input">Chart Type</InputLabel>
@@ -75,6 +82,15 @@ export default class Dendrogram extends React.Component {
         >
           {annotationOptions}
         </Select>
+      </FormControl>,
+      <FormControl key="button-4-0-0">
+        <InputLabel htmlFor="chart-projection-input">Filter</InputLabel>
+        <Select
+          value={this.state.filter}
+          onChange={e => this.setState({ filter: e.target.value })}
+        >
+          {filterOptions}
+        </Select>
       </FormControl>
     ]
 
@@ -85,7 +101,8 @@ export default class Dendrogram extends React.Component {
       demo: DendrogramRaw({
         annotation: this.state.annotation,
         type: this.state.type,
-        projection: this.state.projection
+        projection: this.state.projection,
+        filter: this.state.filter
       }),
       source: `const annotations = [
         {
diff --git a/src/docs/components/DendrogramRaw.js b/src/docs/components/DendrogramRaw.js
@@ -8,8 +8,12 @@ const colors = ["#00a2ce", "#b6a756", "#4d430c", "#b3331d"]
 export default ({
   annotation = "rectangle",
   type = "dendrogram",
-  projection
+  projection,
+  filter
 }) => {
+  const nodeFilter =
+    filter === "none" ? undefined : d => d.parent && d.parent.name === filter
+
   const hierarchicalChart = {
     title: "D3v3 API",
     size: [700, 700],
@@ -49,6 +53,7 @@ export default ({
         </div>
       )
     },
+    filterRenderedNodes: nodeFilter,
     annotations: [
       {
         type: annotation === "rectangle" ? "enclose-rect" : "enclose",
diff --git a/src/docs/components/SunburstRaw.js b/src/docs/components/SunburstRaw.js
@@ -31,7 +31,18 @@ const sunburstSettings = {
       <p>{d.data.name}</p>
     </div>
   ),
-  margin: 10
+  nodeLabels: d => {
+    return d.x1 - d.x0 < 8 ? null : (
+      <g transform="translate(0,5)">
+        <text textAnchor="middle" strokeWidth={2} stroke="white" fill="white">
+          {d.id}
+        </text>
+        <text textAnchor="middle">{d.id}</text>
+      </g>
+    )
+  },
+  margin: 10,
+  filterRenderedNodes: d => d.depth !== 0
 }
 export default (
   <div>

Original file line number	Diff line number	Diff line change
`@@ -329,7 +329,8 @@ export const networkframeproptypes = {`
`329`	`329`	`edgeStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),`
`330`	`330`	`customNodeIcon: PropTypes.func,`
`331`	`331`	`zoomToFit: PropTypes.bool,`
`332`		`- edgeType: PropTypes.oneOfType([PropTypes.string, PropTypes.func])`
	`332`	`+ edgeType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),`
	`333`	`+ filterRenderedNodes: PropTypes.func`
`333`	`334`	`}`
`334`	`335`
`335`	`336`	`export const responsiveprops = {`