d3-geo-zoom

KO | EN

gitlite — search

#llm #machine-learning #deep-learning #linux #docker #nodejs #java #cli #vue #pytorch #security #ios #openai #open-source

(★ 34)

Zoom and pan D3 geo projections

d3-geo-zoom 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

d3.geoZoom
==============

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]

Apply zoom and pan user interactions to D3 spherical map projections in the same fashion as [d3-zoom](https://github.com/d3/d3-zoom) for regular cartesian coordinates. Generally used with [Azimuthal projections](https://github.com/d3/d3-geo#azimuthal-projections), but also works for other projection types as long as scaling and rotation is supported.

Heavily based in previous work by Jason Davies' [Rotate the World](https://www.jasondavies.com/maps/rotate/) and Mike Bostock's [Versor Dragging](https://observablehq.com/@d3/versor-dragging).
Makes use of Fil's [versors package](https://github.com/Fil/versor) for translating mouse coordinates to the sphere.

See the included examples ([canvas](https://vasturiano.github.io/d3-geo-zoom/example/canvas/) and [svg](https://vasturiano.github.io/d3-geo-zoom/example/svg/)).

## Quick start

```js
import d3GeoZoom from 'd3-geo-zoom';
```
or using a *script* tag
```html
<script src="//cdn.jsdelivr.net/npm/d3-geo-zoom"></script>
```
then
```js
d3.geoZoom()
 .projection(<mapProjection>)
 .onMove(<callbackFn>)
 (<mapDomNode>);
```

## API reference

| Method | Description | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |:-------------:|
| projection([object]) | Getter/setter for the [D3 projection object](https://github.com/d3/d3-geo#projections) whose position settings are modified according to the zoom/pan user interactions. The projection should support the `scale` and `rotate` methods. | - |
| northUp([boolean]) | Getter/setter for whether to maintain a north pointing upwards orientation or allow free rotation in all directions. | false |
| scaleExtent([array]) | Getter/setter for the scale extent (`[min, max]`) to restrict the zoom interaction to. | `[0.1, 1000]` |
| onMove([fn({ scale, rotation })]) | Callback function for when the projection object is updated due to a user interaction. This is a convenient place to bind the render function that redraws the map component elements according to the current projection settings. The callback function includes a single object parameter that contains the new scale and rotation values. | - |

[npm-img]: https://img.shields.io/npm/v/d3-geo-zoom
[npm-url]: https://npmjs.org/package/d3-geo-zoom
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-geo-zoom
[build-size-url]: https://bundlephobia.com/result?p=d3-geo-zoom
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-geo-zoom
[npm-downloads-url]: https://www.npmtrends.com/d3-geo-zoom

d3-geo-zoom

d3-geo-zoom 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

d3-geo-zoom

d3-geo-zoom 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README