|
1 | 1 | # react-d3-graph · [](https://travis-ci.org/danielcaldas/react-d3-graph) |
2 | 2 |
|
3 | | -[](https://www.npmjs.com/package/react-d3-graph) [](https://npm-stat.com/charts.html?package=react-d3-graph&from=2017-04-25) [](https://probot.github.io/) [](https://trello.com/b/KrnmFXha/react-d3-graph) |
| 3 | +[](https://www.npmjs.com/package/react-d3-graph) [](https://npm-stat.com/charts.html?package=react-d3-graph&from=2017-04-25) [](https://probot.github.io/) [](https://trello.com/b/KrnmFXha/react-d3-graph) |
4 | 4 | [](https://github.com/prettier/prettier) |
5 | 5 |
|
6 | | -:book: [1.2.0](https://danielcaldas.github.io/react-d3-graph/docs/index.html) |
| 6 | +:book: [1.2.1](https://danielcaldas.github.io/react-d3-graph/docs/index.html) |
7 | 7 |
|
8 | 8 | ### _Interactive and configurable graphs with react and d3 effortlessly_ |
9 | 9 |
|
@@ -36,59 +36,59 @@ import { Graph } from 'react-d3-graph'; |
36 | 36 |
|
37 | 37 | // graph payload (with minimalist structure) |
38 | 38 | const data = { |
39 | | - nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }], |
40 | | - links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }] |
| 39 | + nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }], |
| 40 | + links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }] |
41 | 41 | }; |
42 | 42 |
|
43 | 43 | // the graph configuration, you only need to pass down properties |
44 | 44 | // that you want to override, otherwise default ones will be used |
45 | 45 | const myConfig = { |
46 | | - nodeHighlightBehavior: true, |
47 | | - node: { |
48 | | - color: 'lightgreen', |
49 | | - size: 120, |
50 | | - highlightStrokeColor: 'blue' |
51 | | - }, |
52 | | - link: { |
53 | | - highlightColor: 'lightblue' |
54 | | - } |
| 46 | + nodeHighlightBehavior: true, |
| 47 | + node: { |
| 48 | + color: 'lightgreen', |
| 49 | + size: 120, |
| 50 | + highlightStrokeColor: 'blue' |
| 51 | + }, |
| 52 | + link: { |
| 53 | + highlightColor: 'lightblue' |
| 54 | + } |
55 | 55 | }; |
56 | 56 |
|
57 | 57 | // graph event callbacks |
58 | 58 | const onClickNode = function(nodeId) { |
59 | | - window.alert('Clicked node ${nodeId}'); |
| 59 | + window.alert('Clicked node ${nodeId}'); |
60 | 60 | }; |
61 | 61 |
|
62 | 62 | const onMouseOverNode = function(nodeId) { |
63 | | - window.alert(`Mouse over node ${nodeId}`); |
| 63 | + window.alert(`Mouse over node ${nodeId}`); |
64 | 64 | }; |
65 | 65 |
|
66 | 66 | const onMouseOutNode = function(nodeId) { |
67 | | - window.alert(`Mouse out node ${nodeId}`); |
| 67 | + window.alert(`Mouse out node ${nodeId}`); |
68 | 68 | }; |
69 | 69 |
|
70 | 70 | const onClickLink = function(source, target) { |
71 | | - window.alert(`Clicked link between ${source} and ${target}`); |
| 71 | + window.alert(`Clicked link between ${source} and ${target}`); |
72 | 72 | }; |
73 | 73 |
|
74 | 74 | const onMouseOverLink = function(source, target) { |
75 | | - window.alert(`Mouse over in link between ${source} and ${target}`); |
| 75 | + window.alert(`Mouse over in link between ${source} and ${target}`); |
76 | 76 | }; |
77 | 77 |
|
78 | 78 | const onMouseOutLink = function(source, target) { |
79 | | - window.alert(`Mouse out link between ${source} and ${target}`); |
| 79 | + window.alert(`Mouse out link between ${source} and ${target}`); |
80 | 80 | }; |
81 | 81 |
|
82 | 82 | <Graph |
83 | | - id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error |
84 | | - data={data} |
85 | | - config={myConfig} |
86 | | - onClickNode={onClickNode} |
87 | | - onClickLink={onClickLink} |
88 | | - onMouseOverNode={onMouseOverNode} |
89 | | - onMouseOutNode={onMouseOutNode} |
90 | | - onMouseOverLink={onMouseOverLink} |
91 | | - onMouseOutLink={onMouseOutLink} |
| 83 | + id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error |
| 84 | + data={data} |
| 85 | + config={myConfig} |
| 86 | + onClickNode={onClickNode} |
| 87 | + onClickLink={onClickLink} |
| 88 | + onMouseOverNode={onMouseOverNode} |
| 89 | + onMouseOutNode={onMouseOutNode} |
| 90 | + onMouseOverLink={onMouseOverLink} |
| 91 | + onMouseOutLink={onMouseOutLink} |
92 | 92 | />; |
93 | 93 | ``` |
94 | 94 |
|
|
0 commit comments