d3-exporter

d3-exporter

A D3.js plugin for exporting animations.

Installation

npm install d3-exporter

Getting Started

import * as d3 from 'd3';
import Exporter from 'd3-exporter';

(async function() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const radius = 50;

    const svg = d3.create('svg')
        .attr('viewBox', [0, 0, width, height])
        .style('height', '100%')
        .style('width', '100%')

    svg.append('circle')
        .attr('cx', width / 2 - radius / 2)
        .attr('cy', height / 2 - radius / 2)
        .style('fill', '#000')
        .transition()
            .duration(1000)
            .ease(d3.easeCubicOut)
            .attrTween('r', () => d3.interpolate(0, radius))

    document.body.appendChild(svg.node());
    await Exporter.sequence(svg);
})();

API

Exporter.render(element, options: RenderOptions) : []Blob

Renders a frame sequence and returns an array of image blobs.

RenderOptions

An object of options to pass into Exporter.render.

Field	Type	Default Value	Description
frameCount	Number	60	The number of frames to run the exporter for.
frameRate	Number	60	The frame rate of the exporter.
backgroundColor	String	#FFF	A background color for the exported image.

Exporter.sequence(element, options: SequenceOptions)

Exports a frame sequence from a D3 animation.

SequenceOptions

An object of options to pass into Exporter.sequence.

Field	Type	Default Value	Description
imageType	String	jpeg	A file format for the image output.
frameCount	Number	60	The number of frames to run the exporter for.
frameRate	Number	60	The frame rate of the exporter.
backgroundColor	String	#FFF	A background color for the exported image.

Exporter.frame(element, options: FrameOptions)

Exports a frame from a D3 animation.

FrameOptions

An object of options to pass into Exporter.frame.

Field	Type	Default Value	Description
imageType	String	jpeg	A file format for the image output.
frameIndex	Number	0	The frame index to export.
frameCount	Number	frameIndex + 1	The number of frames to run the exporter for.
frameRate	Number	60	The frame rate of the exporter.
backgroundColor	String	#FFF	A background color for the exported image.

Author

Kazi Jawad

Acknowledgements

html-to-image