Utils for using d3 easily.

Based on the [email protected]

Install

npm install @wings-j/d3-utils

Usage

import { install } from '@wings-j/d3-utils'
import * as d3 from 'd3'

install(d3)

Tool methods are injected into the d3 prototype.

API

Selection.attrs

Setting several attributes at the same time.

d3.select('selector').attrs({
  id: 'id',
  title: 'title'
})

Selection.classeds

Setting several classes at the same time.

d3.select('selector').classed({
  a: true,
  b: false,
  c: true
})

Selection.styles

Setting several styles at the same time.

d3.select('selector').styles({
  color: 'red',
  'font-weight': 'bold'
})

Selection.properties

Setting several properties at the same time.

d3.select('selector').properties({
  value: 'value'
})

Selection.translate

Setting the translate part of the transform attribute without affecting other parts.

d3.select('selector').translate(0, 0)

Selection.scale

Setting the scale part of the transform attribute without affecting other parts.

d3.select('selector').scale(1, 1)

Selection.rotate

Setting the rotate part of the transform attribute without affecting other parts.

d3.select('selector').rotate(0, 0, 0)

container

Creating a container svg into a DOM element. The svg has the same width and height with the DOM element.

import { Container } from 'd3-utils'

let $svg = Container('selector')

zoom

Create a zoomed g element.

import { Zoom } from 'd3-utils'

let $zoom = Zoom($svg)