You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Here a live playground](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) page where you can interactively config your own graph, and generate a ready to use configuration! :sunglasses:
23
15
24
16
You can also load different data sets and configurations via URL query parameter. Below is a table with all the data sets available in the live sandbox for you to interactively explore different kinds of integrations with the library.
| small |[see it in action](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=small)|`sandbox/data/small`| This is a good example to get you started. It has only 4 nodes. It's good to discuss over integration details and it's also good to report issues that you might found in the library. It's much easier to debug over a tiny graph. |
29
-
| custom-node|[see it in action](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=custom-node)|`sandbox/data/custom-node`| In this example you'll be able to see the power of the feature [node.viewGenerator](https://danielcaldas.github.io/react-d3-graph/docs/#node-view-generator) to create highly customizable nodes for you graph that go beyond the simple shapes that come out of the box with the library. |
30
-
| marvel |[see it in action](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel)|`sandbox/data/marvel`| In this thematic example you can see how several features such as: [nodeHighlightBehavior](https://danielcaldas.github.io/react-d3-graph/docs/#node-highlight-behavior), [custom SVGs for nodes](https://danielcaldas.github.io/react-d3-graph/docs/#node-svg), [collapsible](https://danielcaldas.github.io/react-d3-graph/docs/#collapsible) etc. come together on top of a directed graph that displays some characters from the Marvel Universe. |
31
-
| static |[see it in action](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=static)|`sandbox/data/static`| If your goal is not to have nodes dancing around with the default [d3 forces](https://danielcaldas.github.io/react-d3-graph/docs/#config-d3) that the library provides, you can opt by making your nodes static and positioned them always in the same _(x, y)_ coordinates. To achieve this you can make use of [staticGraphWithDragAndDrop](https://danielcaldas.github.io/react-d3-graph/docs/#static-graph-with-drag-and-drop) or [staticGraph](https://danielcaldas.github.io/react-d3-graph/docs/#static-graph)|
| small |[demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=small)|`sandbox/data/small`| This is a good example to get you started. It has only 4 nodes. It's good to discuss over integration details and it's also good to report issues that you might found in the library. It's much easier to debug over a tiny graph. |
21
+
| custom |[demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=custom-node)|`sandbox/data/custom-node`| In this example you'll be able to see the power of the feature [node.viewGenerator](https://danielcaldas.github.io/react-d3-graph/docs/#node-view-generator) to create highly customizable nodes for you graph that go beyond the simple shapes that come out of the box with the library. |
22
+
| marvel |[demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel)|`sandbox/data/marvel`| In this thematic example you can see how several features such as: [nodeHighlightBehavior](https://danielcaldas.github.io/react-d3-graph/docs/#node-highlight-behavior), [custom SVGs for nodes](https://danielcaldas.github.io/react-d3-graph/docs/#node-svg), [collapsible](https://danielcaldas.github.io/react-d3-graph/docs/#collapsible) etc. come together on top of a directed graph that displays some characters from the Marvel Universe. |
23
+
| static |[demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=static)|`sandbox/data/static`| If your goal is not to have nodes dancing around with the default [d3 forces](https://danielcaldas.github.io/react-d3-graph/docs/#config-d3) that the library provides, you can opt by making your nodes static and positioned them always in the same _(x, y)_ coordinates. To achieve this you can make use of [staticGraphWithDragAndDrop](https://danielcaldas.github.io/react-d3-graph/docs/#static-graph-with-drag-and-drop) or [staticGraph](https://danielcaldas.github.io/react-d3-graph/docs/#static-graph)|
32
24
33
25
Do you want to visualize your own data set on the live sandbox? Just submit a PR! You're welcome 😁.
34
26
@@ -54,7 +46,7 @@ npm install react-d3-graph
54
46
> npm WARN [email protected] requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.
55
47
> npm WARN [email protected] requires a peer of react@^16.4.1 but none is installed. You must install peer dependencies yourself.
56
48
57
-
## Usage sample
49
+
## Minimal usage example
58
50
59
51
Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
60
52
The code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx).
@@ -71,8 +63,7 @@ const data = {
71
63
],
72
64
};
73
65
74
-
// the graph configuration, you only need to pass down properties
75
-
// that you want to override, otherwise default ones will be used
66
+
// the graph configuration, just override the ones you need
76
67
constmyConfig= {
77
68
nodeHighlightBehavior:true,
78
69
node: {
@@ -85,72 +76,37 @@ const myConfig = {
85
76
},
86
77
};
87
78
88
-
// graph event callbacks
89
-
constonClickGraph=function() {
90
-
window.alert(`Clicked the graph background`);
91
-
};
92
-
93
79
constonClickNode=function(nodeId) {
94
80
window.alert(`Clicked node ${nodeId}`);
95
81
};
96
82
97
-
constonDoubleClickNode=function(nodeId) {
98
-
window.alert(`Double clicked node ${nodeId}`);
99
-
};
100
-
101
-
constonRightClickNode=function(event, nodeId) {
102
-
window.alert(`Right clicked node ${nodeId}`);
103
-
};
104
-
105
-
constonMouseOverNode=function(nodeId) {
106
-
window.alert(`Mouse over node ${nodeId}`);
107
-
};
108
-
109
-
constonMouseOutNode=function(nodeId) {
110
-
window.alert(`Mouse out node ${nodeId}`);
111
-
};
112
-
113
83
constonClickLink=function(source, target) {
114
84
window.alert(`Clicked link between ${source} and ${target}`);
Contributions are welcome, feel free to submit new ideas/features, just open an issue or send me an email or something. If you are more a _hands on_ person, just submit a pull request. Before jumping into coding, please take a look at the contribution guidelines [CONTRIBUTING.md](https://github.com/danielcaldas/react-d3-graph/blob/master/CONTRIBUTING.md).
109
+
Contributions are welcome, feel free to submit new ideas/features, just go ahead and open an issue. If you are more a _hands on_ person, just submit a pull request. Before jumping into coding, please take a look at the contribution guidelines [CONTRIBUTING.md](https://github.com/danielcaldas/react-d3-graph/blob/master/CONTRIBUTING.md).
154
110
155
111
To run react-d3-graph in development mode you just need to run `npm run dev` and the interactive sandbox will reload with the changes to the library code, that way you can test your changes not only through unit test but also through a real life example. It's that simple. The development workflow usually should follow the steps:
This is not yet a full automated process, so here are a few steps to get the thing properly released on github and publish under npm registry.
3
+
Here are the steps to get the thing properly released on GitHub and published under the npm public registry. There's the need of some manual interventions throughout the release process.
4
4
5
-
### Setup (serve a local version to run tests against it)
5
+
##Requirements
6
6
7
-
1. npm run dist:sandbox
8
-
2. npm run start (server should keep running in the background as we're going to run
9
-
cypress against it)
7
+
- Make sure you're able to run `react-d3-graph` locally, follow the `Contributions` steps in the `README.md`.
8
+
- Install the [github-changelog-generator](https://github.com/github-changelog-generator/github-changelog-generator) gem locally. The distribution script will use it to automatically generate a changelog (if possible version >=1.15.2).
9
+
- Verify the version: `github_changelog_generator -v`
10
10
11
11
### Release steps
12
12
13
-
1. Update versioning in package.json
14
-
2. npm run dist
15
-
3. npm run docs
16
-
4. Small tweaks on documentation page (quicklinks)
17
-
5. Replace current files in docs for the generated ones in gen-docs
0 commit comments