# @katze/ngx-d3

> A D3 service for Angular applications

Latest version **1.0.0** (published 2021-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @katze/ngx-d3
pnpm add @katze/ngx-d3
yarn add @katze/ngx-d3
bun add @katze/ngx-d3
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-06-25 |
| First published | 2019-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 28.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Zeev Katz |
| Maintainers | katze |
| Keywords | ngx-d3, angular-d3, ng-d3, katze, d3, ng, ngx, angular, d3-array, d3-axis, d3-brush, d3-chord, d3-collection, d3-color, d3-contour, d3-dispatch, d3-drag, d3-dsv, d3-ease, d3-force, d3-format, d3-geo, d3-hierarchy, d3-interpolate, d3-path, d3-polygon, d3-quadtree, d3-random, d3-scale, d3-scale-chromatic, d3-selection, d3-shape, d3-time, d3-time-format, d3-timer, d3-transition, d3-voronoi, d3-zoom |

## Links

- npm: https://www.npmjs.com/package/@katze/ngx-d3
- Repository: https://github.com/ZeevKatz/ngx-d3
- Homepage: https://github.com/ZeevKatz/ngx-d3#readme
- Issues: https://github.com/ZeevKatz/ngx-d3/issues
- npm.io page: https://npm.io/package/@katze/ngx-d3

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^5.9.1
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [@types/d3](https://npm.io/package/@types/d3.md) ^5.7.1

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-06-25
- 0.3.0 — 2021-01-17
- 0.2.1 — 2019-07-08
- 0.2.0 — 2019-06-03
- 0.1.4 — 2019-05-21
- 0.1.3 — 2019-05-19
- 0.1.2 — 2019-05-19
- 0.1.1 — 2019-05-19

## README

<p align="center">
  <img src="docs/assets/logo.png" />
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/@katze/ngx-d3">
    <img src="https://img.shields.io/npm/dt/@katze/ngx-d3.svg" />
  </a>  
  <a href="https://www.npmjs.com/package/@katze/ngx-d3">
    <img src="https://img.shields.io/npm/l/@katze/ngx-d3.svg" />
  </a>
  <a href="https://travis-ci.org/ZeevKatz/ngx-d3">
    <img src="https://api.travis-ci.org/ZeevKatz/ngx-d3.svg?branch=master" />
  </a>
</p>

`ngx-d3` is a [D3](https://github.com/d3/d3) wrapper service for [Angular](https://angular.io/) applications inspired by [@tomwanzek/d3-ng2-service](https://github.com/tomwanzek/d3-ng2-service).

---
### Installation

```
yarn add @katze/ngx-d3
```
---
### Usage

* `NgxD3Service`: The Angular D3 Service injectable,
* `D3`: A TypeScript type alias for the `d3` variable which can be obtained from the `NgxD3Service`, and
* the various TypeScript interfaces and type aliases which are related to the D3 modules constituting `d3` as provided by this service (e.g. `Selection`, `Transition`, `Axis`). 

To obtain the `d3` object from an injected D3 service `ngxD3Service: NgxD3Service`, it offers a method `ngxD3Service.getD3()` with return type `D3`. 

---
### How to use

```ts
import { Component, OnInit } from '@angular/core';
import { NgxD3Service } from '@katze/ngx-d3';

@Component({
  selector: 'histogram-component',
  templateUrl: 'histogram-component.component.html',
  styleUrls: ['histogram-component.component.css']
})
export class HistogramComponent implements OnInit {
  private readonly d3 = this.ngxD3Service.getD3();

  constructor(private readonly ngxD3Service: NgxD3Service) {}

  ngOnInit() {
    this.d3.select(...)
    // ...
  }
}
```

---
_Source: https://npm.io/package/@katze/ngx-d3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._