-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2d_text.html
51 lines (44 loc) · 2.01 KB
/
2d_text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/@babel/standalone"></script>
<script src="//unpkg.com/react-force-graph-2d"></script>
<!--<script src="../../src/packages/react-force-graph-2d/dist/react-force-graph-2d.js"></script>-->
</head>
<body>
<div id="graph"></div>
<script type="text/jsx">
fetch('d3_obj.json').then(res => res.json()).then(data => {
console.log(data);
ReactDOM.render(
<ForceGraph2D
graphData={data}
linkWidth={node => node.value}
nodeCanvasObject={(node, ctx, globalScale) => {
const label = node.name;
const fontSize = 12/globalScale;
ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width;
const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
let tempColor = (node.gender == 'm') ? '#0000ff' : (node.gender == 'f') ? '#FF7276' : '#000000';
ctx.fillStyle =tempColor;
ctx.fillText(label, node.x, node.y);
node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
}}
nodePointerAreaPaint={(node, color, ctx) => {
ctx.fillStyle = color;
const bckgDimensions = node.__bckgDimensions;
bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
}}
onNodeClick={node => window.open("https://sxctrack.com/athlete/" + node.id, "_blank")}
/>,
document.getElementById('graph')
);
});
</script>
</body>