-
Notifications
You must be signed in to change notification settings - Fork 268
/
PureSvgNodeElement.js
56 lines (53 loc) · 1.19 KB
/
PureSvgNodeElement.js
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
52
53
54
55
56
import React from 'react';
const textLayout = {
vertical: {
title: {
textAnchor: 'start',
x: 40,
},
attributes: {},
attribute: {
x: 40,
dy: '1.2em',
},
},
horizontal: {
title: {
textAnchor: 'start',
y: 40,
},
attributes: {
x: 0,
y: 40,
},
attribute: {
x: 0,
dy: '1.2em',
},
},
};
const PureSvgNodeElement = ({ nodeDatum, orientation, toggleNode, onNodeClick }) => {
return (
<>
<circle r={20} onClick={toggleNode}></circle>
<g className="rd3t-label">
<text
className="rd3t-label__title"
{...textLayout[orientation].title}
onClick={onNodeClick}
>
{nodeDatum.name}
</text>
<text className="rd3t-label__attributes" {...textLayout[orientation].attributes}>
{nodeDatum.attributes &&
Object.entries(nodeDatum.attributes).map(([labelKey, labelValue], i) => (
<tspan key={`${labelKey}-${i}`} {...textLayout[orientation].attribute}>
{labelKey}: {labelValue}
</tspan>
))}
</text>
</g>
</>
);
};
export default PureSvgNodeElement;