Skip to content

Commit 8d4e29c

Browse files
danielcaldasdanielcaldas
committed
docs: trim down README.md
1 parent 4907c77 commit 8d4e29c

File tree

1 file changed

+11
-56
lines changed

1 file changed

+11
-56
lines changed

‎README.md‎

Lines changed: 11 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515

1616
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.
1717

18-
| Name | Link | Source | Description |
19-
| :---------- | :---------------------------------------------------------------------------------------------------- | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
20-
| 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. |
21-
| 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. |
22-
| 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. |
23-
| 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) |
18+
| Name | Link | Source | Description |
19+
| :----- | :---------------------------------------------------------------------------------------- | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
20+
| 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) |
2424

2525
Do you want to visualize your own data set on the live sandbox? Just submit a PR! You're welcome 😁.
2626

@@ -46,7 +46,7 @@ npm install react-d3-graph
4646
> npm WARN [email protected] requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.
4747
> npm WARN [email protected] requires a peer of react@^16.4.1 but none is installed. You must install peer dependencies yourself.
4848
49-
## Usage sample
49+
## Minimal usage example
5050

5151
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).
5252
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).
@@ -63,8 +63,7 @@ const data = {
6363
],
6464
};
6565

66-
// the graph configuration, you only need to pass down properties
67-
// that you want to override, otherwise default ones will be used
66+
// the graph configuration, just override the ones you need
6867
const myConfig = {
6968
nodeHighlightBehavior: true,
7069
node: {
@@ -77,69 +76,25 @@ const myConfig = {
7776
},
7877
};
7978

80-
// graph event callbacks
81-
const onClickGraph = function() {
82-
window.alert(`Clicked the graph background`);
83-
};
84-
8579
const onClickNode = function(nodeId) {
8680
window.alert(`Clicked node ${nodeId}`);
8781
};
8882

89-
const onDoubleClickNode = function(nodeId) {
90-
window.alert(`Double clicked node ${nodeId}`);
91-
};
92-
93-
const onRightClickNode = function(event, nodeId) {
94-
window.alert(`Right clicked node ${nodeId}`);
95-
};
96-
97-
const onMouseOverNode = function(nodeId) {
98-
window.alert(`Mouse over node ${nodeId}`);
99-
};
100-
101-
const onMouseOutNode = function(nodeId) {
102-
window.alert(`Mouse out node ${nodeId}`);
103-
};
104-
10583
const onClickLink = function(source, target) {
10684
window.alert(`Clicked link between ${source} and ${target}`);
10785
};
10886

109-
const onRightClickLink = function(event, source, target) {
110-
window.alert(`Right clicked link between ${source} and ${target}`);
111-
};
112-
113-
const onMouseOverLink = function(source, target) {
114-
window.alert(`Mouse over in link between ${source} and ${target}`);
115-
};
116-
117-
const onMouseOutLink = function(source, target) {
118-
window.alert(`Mouse out link between ${source} and ${target}`);
119-
};
120-
121-
const onNodePositionChange = function(nodeId, x, y) {
122-
window.alert(`Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}`);
123-
};
124-
12587
<Graph
126-
id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
88+
id="graph-id" // id is mandatory
12789
data={data}
12890
config={myConfig}
12991
onClickNode={onClickNode}
130-
onDoubleClickNode={onDoubleClickNode}
131-
onRightClickNode={onRightClickNode}
132-
onClickGraph={onClickGraph}
13392
onClickLink={onClickLink}
134-
onRightClickLink={onRightClickLink}
135-
onMouseOverNode={onMouseOverNode}
136-
onMouseOutNode={onMouseOutNode}
137-
onMouseOverLink={onMouseOverLink}
138-
onMouseOutLink={onMouseOutLink}
139-
onNodePositionChange={onNodePositionChange}
14093
/>;
14194
```
14295

96+
For more advanced use cases check [the official documentation](https://danielcaldas.github.io/react-d3-graph/docs/index.html).
97+
14398
## Core Team
14499

145100
The group of maintainers driving the project.

0 commit comments

Comments
 (0)