Created
April 5, 2019 20:52
-
-
Save strass/f0149cc45f107bfc0fd5babc9cea9574 to your computer and use it in GitHub Desktop.
charm trees
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { RefObject } from 'react' | |
| import { storiesOf } from '@storybook/react' | |
| import D3Playground from '.' | |
| // import * as dagreD3 from 'dagre-d3' | |
| import * as d3 from 'd3' | |
| import * as d3dag from 'd3-dag' | |
| import { LinkVerticalStep } from '@vx/shape' | |
| import { lightpurple } from '../TreeGraph/colors' | |
| // import NetworkGraph from '../NetworkGraph' | |
| // import TreeGraph from '../TreeGraph'; | |
| // import TreeGraph from '../TreeGraph' | |
| import CharmNode from './CharmNode' | |
| const [height, width] = [600, 700] | |
| const nodeRadius = 20 | |
| const xData = [ | |
| { id: 'glc', label: 'Gathering Light Concentration' }, | |
| { id: 'sse', label: 'Shining Starfall Execution' }, | |
| { | |
| id: 'spsitvf', | |
| label: 'Single Point Shining Into the Void Form', | |
| parentIds: ['glc', 'sse'], | |
| }, | |
| { id: 'fsf', label: 'Fatal Stroke Flash', parentIds: ['spsitvf'] }, | |
| { id: 'vsw', label: 'Void-Slicing Wind', parentIds: ['spsitvf'] }, | |
| { id: 'hssf', label: 'Horizon Swallowed Star Flash', parentIds: ['spsitvf'] }, | |
| { id: 'lsf', label: 'Liquid Steel Flow', parentIds: ['fsf'] }, | |
| { id: 'sdsb', label: 'Six-Demon Scabbard Binding', parentIds: ['hssf'] }, | |
| { | |
| id: 'bnf', | |
| label: 'Blinding Nova Flare', | |
| parentIds: ['lsf', 'vsw', 'sdsb'], | |
| }, | |
| ] | |
| const dag = d3dag.dagStratify()(xData) | |
| const coords = [ | |
| d3dag.coordVert(), | |
| d3dag.coordMinCurve(), | |
| d3dag.coordGreedy(), | |
| d3dag.coordCenter(), | |
| ] | |
| const layout = d3dag | |
| .sugiyama() | |
| .size([width, height]) | |
| .layering(d3dag.layeringLongestPath()) | |
| .coord(coords[3]) | |
| const TreeTest = () => { | |
| const t = layout(dag) | |
| const descendants = t.descendants() | |
| return ( | |
| <svg | |
| id="testsvg" | |
| width={width} | |
| height={height} | |
| viewBox={`-${80} -${20} ${width + 2 * 80} ${height + 2 * 20}`} | |
| > | |
| {t.links().map((link: any, i: number) => { | |
| console.log(link) | |
| const percent = 1 / ((link.target.layer - link.source.layer) * 2) | |
| const sourcesFromLeftToRight = [...(link.source.children || [])].sort( | |
| c => c.x | |
| ) | |
| const sinkParentsFromLeftToRight = [ | |
| ...(link.target.data.parentIds.map((id: string) => | |
| descendants.find((n: { id: string }) => id === n.id) | |
| ) || []), | |
| ].sort(c => c.x) | |
| const distanceFromSourceCenter = | |
| sourcesFromLeftToRight.indexOf(link.target) - | |
| (sourcesFromLeftToRight.length / 2 - 0.5) | |
| const distanceFromTargetCenter = | |
| sinkParentsFromLeftToRight.indexOf(link.source) - | |
| (sinkParentsFromLeftToRight.length / 2 - 0.5) | |
| console.log( | |
| sinkParentsFromLeftToRight.map(x => x.id), | |
| distanceFromTargetCenter | |
| ) | |
| return ( | |
| <LinkVerticalStep | |
| key={`link-${i}`} | |
| data={{ | |
| ...link, | |
| source: { | |
| ...link.source, | |
| x: link.source.x + distanceFromSourceCenter * 20, | |
| }, | |
| target: { | |
| ...link.target, | |
| x: link.target.x + distanceFromTargetCenter * 20, | |
| }, | |
| }} | |
| stroke={lightpurple} | |
| strokeWidth="1" | |
| percent={percent} | |
| fill="none" | |
| /> | |
| ) | |
| })} | |
| {t | |
| .descendants() | |
| .map( | |
| ( | |
| n: { x: number; y: number; data: { label: string } }, | |
| i: number | |
| ) => ( | |
| <foreignObject | |
| key={i} | |
| x={n.x - 80} | |
| y={n.y - 40} | |
| width="158" | |
| height="80" | |
| > | |
| <CharmNode data={n.data} /> | |
| </foreignObject> | |
| ) | |
| )} | |
| </svg> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment