Utils for using d3 easily.
Based on the d3@7.0.0
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)