reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 06:00:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update d3tooltip docs

Browse Source
This commit is contained in:
Nathan Bierema 2023-01-02 12:15:21 -05:00
parent 1320e7a315
commit fbe30c9c72
2 changed files with 30 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/d3tooltip/README.md
View File

@ -10,45 +10,45 @@ It was created by [@romseguy](https://github.com/romseguy) and merged from [`rom
## Quick usage
```javascript
import d3 from 'd3';
import * as d3 from 'd3';
import { tooltip } from 'd3tooltip';
const DOMNode = document.getElementById('chart');
const root = d3.select(DOMNode);
const vis = root.append('svg');
let options = {
offset: {left: 30, top: 10}
const options = {
offset: { left: 30, top: 10 },
styles: { 'min-width': '50px', 'border-radius': '5px' },
};
vis.selectAll('circle').data(someData).enter()
vis
.selectAll('circle')
.data(someData)
.enter()
.append('circle')
.attr('r', 10)
.call(
d3tooltip(d3, 'tooltipClassName', options)
.text((d, i) => toStringOrHtml(d))
.attr({ 'class': 'anotherClassName' })
.style({ 'min-width': '50px', 'border-radius: 5px' })
d3tooltip('tooltipClassName', {
...options,
text: (d) => toStringOrHtml(d),
})
)
.on({
mouseover(d, i) {
d3.select(this).style({
fill: 'skyblue'
});
},
mouseout(d, i) {
d3.select(this).style({
fill: 'black'
});
}
.on('mouseover', function () {
d3.select(this).style('fill', 'skyblue');
})
.on('mouseout', function () {
d3.select(this).style('fill', 'black');
});
```
## API
| Option | Type | Default | Description |
| -------- | ----------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select) |
| `left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element |
| `top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element |
| `offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option |
| -------- | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `root` | DOM.Element | `body` | The tooltip will be added as a child of that element. You can also use a D3 [selection](https://github.com/mbostock/d3/wiki/Selections#d3_select). |
| `left` | Number | `undefined` | Sets the tooltip `x` absolute position instead of the mouse `x` position, relative to the `root` element. |
| `top` | Number | `undefined` | Sets the tooltip `y` absolute position instead of the mouse `y` position, relative to the `root` element. |
| `offset` | Object | `{left: 0, top: 0}` | Sets the distance, starting from the cursor position, until the tooltip is rendered. **Warning**: only applicable if you don't provide a `left` or `top` option. |
| `styles` | Object | `{}` | Sets the styles of the tooltip element. |
| `text` | String or Function | `''` | Sets the text of the tooltip. Can be a constant `string` or a function that takes the datum and returns a `string`. |

15
packages/d3tooltip/src/index.ts
View File

@ -19,8 +19,8 @@ interface Options<
root:
| Selection<RootGElement, RootDatum, RootPElement, RootPDatum>
| undefined;
styles?: { [key: string]: StyleValue };
text?: string | ((datum: Datum) => string);
styles: { [key: string]: StyleValue };
text: string | ((datum: Datum) => string);
}
const defaultOptions: Options<
@ -34,6 +34,8 @@ const defaultOptions: Options<
top: undefined, // mouseY
offset: { left: 0, top: 0 },
root: undefined,
styles: {},
text: '',
};
export function tooltip<
@ -51,14 +53,7 @@ export function tooltip<
Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>
> = {}
) {
const {
left,
top,
offset,
root,
styles = {},
text = '',
} = {
const { left, top, offset, root, styles, text } = {
...defaultOptions,
...options,
} as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>;