| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | interface GraphOptions { |
|---|
| | | localGraph: Partial<D3Config>, |
|---|
| | | localGraph: Partial<D3Config> | undefined, |
|---|
| | | globalGraph: Partial<D3Config> | undefined |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | drag: true, |
|---|
| | | zoom: true, |
|---|
| | | depth: 1, |
|---|
| | | scale: 1.2, |
|---|
| | | repelForce: 2, |
|---|
| | | centerForce: 1, |
|---|
| | | scale: 1.1, |
|---|
| | | repelForce: 0.5, |
|---|
| | | centerForce: 0.3, |
|---|
| | | linkDistance: 30, |
|---|
| | | fontSize: 0.6, |
|---|
| | | opacityScale: 3 |
|---|
| | | opacityScale: 1 |
|---|
| | | }, |
|---|
| | | globalGraph: { |
|---|
| | | drag: true, |
|---|
| | | zoom: true, |
|---|
| | | depth: -1, |
|---|
| | | scale: 1.2, |
|---|
| | | repelForce: 1, |
|---|
| | | centerForce: 1, |
|---|
| | | scale: 0.9, |
|---|
| | | repelForce: 0.5, |
|---|
| | | centerForce: 0.3, |
|---|
| | | linkDistance: 30, |
|---|
| | | fontSize: 0.5, |
|---|
| | | opacityScale: 3 |
|---|
| | | fontSize: 0.6, |
|---|
| | | opacityScale: 1 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | const localGraph = { ...opts?.localGraph, ...defaultOptions.localGraph } |
|---|
| | | const globalGraph = { ...opts?.globalGraph, ...defaultOptions.globalGraph } |
|---|
| | | return <div class="graph"> |
|---|
| | | <h3>Interactive Graph</h3> |
|---|
| | | <h3>Graph View</h3> |
|---|
| | | <div class="graph-outer"> |
|---|
| | | <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div> |
|---|
| | | <svg version="1.1" id="global-graph-icon" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
|---|
