reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 14:09:46 +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 ## Quick usage
```javascript ```javascript
import d3 from 'd3'; import * as d3 from 'd3';
import { tooltip } from 'd3tooltip'; import { tooltip } from 'd3tooltip';
const DOMNode = document.getElementById('chart'); const DOMNode = document.getElementById('chart');
const root = d3.select(DOMNode); const root = d3.select(DOMNode);
const vis = root.append('svg'); const vis = root.append('svg');
let options = { const options = {
offset: {left: 30, top: 10} 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') .append('circle')
.attr('r', 10) .attr('r', 10)
.call( .call(
d3tooltip(d3, 'tooltipClassName', options) d3tooltip('tooltipClassName', {
.text((d, i) => toStringOrHtml(d)) ...options,
.attr({ 'class': 'anotherClassName' }) text: (d) => toStringOrHtml(d),
.style({ 'min-width': '50px', 'border-radius: 5px' }) })
) )
.on({ .on('mouseover', function () {
mouseover(d, i) { d3.select(this).style('fill', 'skyblue');
d3.select(this).style({ })
fill: 'skyblue' .on('mouseout', function () {
}); d3.select(this).style('fill', 'black');
},
mouseout(d, i) {
d3.select(this).style({
fill: 'black'
});
}
}); });
``` ```
## API ## API
| Option | Type | Default | Description | | 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) | | `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 | | `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 | | `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 | | `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: root:
| Selection<RootGElement, RootDatum, RootPElement, RootPDatum> | Selection<RootGElement, RootDatum, RootPElement, RootPDatum>
| undefined; | undefined;
styles?: { [key: string]: StyleValue }; styles: { [key: string]: StyleValue };
text?: string | ((datum: Datum) => string); text: string | ((datum: Datum) => string);
} }
const defaultOptions: Options< const defaultOptions: Options<
@ -34,6 +34,8 @@ const defaultOptions: Options<
top: undefined, // mouseY top: undefined, // mouseY
offset: { left: 0, top: 0 }, offset: { left: 0, top: 0 },
root: undefined, root: undefined,
styles: {},
text: '',
}; };
export function tooltip< export function tooltip<
@ -51,14 +53,7 @@ export function tooltip<
Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum> Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>
> = {} > = {}
) { ) {
const { const { left, top, offset, root, styles, text } = {
left,
top,
offset,
root,
styles = {},
text = '',
} = {
...defaultOptions, ...defaultOptions,
...options, ...options,
} as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>; } as Options<Datum, RootGElement, RootDatum, RootPElement, RootPDatum>;