StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
4.1 KiB
61 lines
4.1 KiB
4 years ago
|
d3-zoomable
|
||
|
|
==================
|
||
|
|
|
||
|
|
[![NPM package][npm-img]][npm-url]
|
||
|
|
[![Build Size][build-size-img]][build-size-url]
|
||
|
|
[![Dependencies][dependencies-img]][dependencies-url]
|
||
|
|
|
||
|
|
This reusable component provides an easy way to make DOM elements zoomable/pannable using mouse wheel/drag events. It is mostly a convenience wrapper around [d3-zoom](https://github.com/d3/d3-zoom) functionality which hides away some of the complexity and provides easy access to common use cases.
|
||
|
|
|
||
|
|
Supports zooming `svg` (via transform attribute), `canvas` (via context transform) or even plain `html` DOM elements (via transform style).
|
||
|
|
|
||
|
|
Check out the examples:
|
||
|
|
* [HTML](https://vasturiano.github.io/d3-zoomable/example/html/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/html/index.html))
|
||
|
|
* [SVG](https://vasturiano.github.io/d3-zoomable/example/svg/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/svg/index.html))
|
||
|
|
* [Canvas](https://vasturiano.github.io/d3-zoomable/example/canvas/) ([source](https://github.com/vasturiano/d3-zoomable/blob/master/example/canvas/index.html))
|
||
|
|
|
||
|
|
## Quick start
|
||
|
|
|
||
|
|
```
|
||
|
|
import zoomable from 'd3-zoomable';
|
||
|
|
```
|
||
|
|
or
|
||
|
|
```
|
||
|
|
const zoomable = require('d3-zoomable');
|
||
|
|
```
|
||
|
|
or even
|
||
|
|
```
|
||
|
|
<script src="//unpkg.com/d3-zoomable"></script>
|
||
|
|
```
|
||
|
|
then
|
||
|
|
```
|
||
|
|
const myZoom = zoomable();
|
||
|
|
myZoom(<DOM element to capture mouse events>)
|
||
|
|
.svgEl(<SVG element to transform>);
|
||
|
|
```
|
||
|
|
|
||
|
|
## API reference
|
||
|
|
|
||
|
|
| Method | Description | Default |
|
||
|
|
| --- | --- | :--: |
|
||
|
|
| <b>htmlEl</b>([<i>node, d3-selection or array</i>]) | Getter/setter for the HTML DOM element to control using the `transform` style property. Also accepts a list of elements by passing an array. | |
|
||
|
|
| <b>svgEl</b>([<i>node, d3-selection or array</i>]) | Getter/setter for the SVG DOM element to control using the `transform` attribute. Also accepts a list of elements by passing an array. | |
|
||
|
|
| <b>canvasEl</b>([<i>node, d3-selection or array</i>]) | Getter/setter for the Canvas DOM element to control using context transform operations. Also accepts a list of elements by passing an array. | |
|
||
|
|
| <b>enableX</b>([<i>bool</i>]) | Getter/setter for whether to enable zooming along the X axis. | `true` |
|
||
|
|
| <b>enableY</b>([<i>bool</i>]) | Getter/setter for whether to enable zooming along the Y axis. | `true` |
|
||
|
|
| <b>scaleExtent</b>([<i>[number, number]</i>]) | Getter/setter for the zoom limits to enforce, similar to [d3-zoom scaleExtent](https://github.com/d3/d3-zoom#zoom_scaleExtent). | `[1, ∞]` |
|
||
|
|
| <b>translateExtent</b>([<i>[[number, number], [number, number]]</i>]) | Getter/setter for the pan limits to enforce, similar to [d3-zoom translateExtent](https://github.com/d3/d3-zoom#zoom_translateExtent). | `[[-∞, -∞], [+∞, +∞]]` |
|
||
|
|
| <b>current</b>() | Getter for the current transform settings, in `{ x, y, k }` syntax. | |
|
||
|
|
| <b>zoomBy</b>(<i>number</i>[, <i>duration</i>]) | Programmatically adjust the zoom scale by a certain amount. Optionally set a transition duration (in `ms`) to animate the transformation. | |
|
||
|
|
| <b>zoomReset</b>([<i>duration</i>]) | Programmatically reset the zoom to its initial setting (`{ x: 0, y: 0, k: 1 }`). Optionally set a transition duration (in `ms`) to animate the transformation. | |
|
||
|
|
| <b>zoomTo</b>(<i>{ x, y, k }</i> [, <i>duration</i>]) | Programmatically apply a certain zoom setting, defined by the `x`, `y` translation, and the `k` scaling. Optionally set a transition duration (in `ms`) to animate the transformation. | |
|
||
|
|
| <b>onChange</b>(<i>fn(newTransform, previousTransform, duration)</i>) | Callback function invoked whenever the zoom settings change, either by user interaction of programmatically. The callback arguments include the new transform (`{ x, y, k }` syntax), the previous transform, and the duration of the zoom (in `ms`) in the case of programmatic requests. | |
|
||
|
|
|
||
|
|
|
||
|
|
[npm-img]: https://img.shields.io/npm/v/d3-zoomable.svg
|
||
|
|
[npm-url]: https://npmjs.org/package/d3-zoomable
|
||
|
|
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-zoomable.svg
|
||
|
|
[build-size-url]: https://bundlephobia.com/result?p=d3-zoomable
|
||
|
|
[dependencies-img]: https://img.shields.io/david/vasturiano/d3-zoomable.svg
|
||
|
|
[dependencies-url]: https://david-dm.org/vasturiano/d3-zoomable
|