d3-svg

Micromodule to return a svg that is selected by d3

  • d3-svg

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
d3-svg
460.2.26 years ago7 years agoMinified + gzip package size for d3-svg in KB

Readme

d3-svg
Greenkeeper badge
build status
A micromodule that appends an svg to the dom and returns it ready to be used by a d3 plugin.

Installing

If you use NPM, npm install d3-svg. Otherwise, download the latest release.

Behavior

This library abstracts the first few lines of any d3 chart that you see:
var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

This approach works when D3 is included as a global object. What about when you distribute charts as plugins or don't have a global D3 instance?
This plugin lets charts bootstrap themselves to the DOM without having to have D3 as a global object.
// my_chart.js
import * as d3_svg from 'd3_svg';

function constructor(elem, opts) {
  var svg = d3_svg.create(elem, opts);

  function chartFunction(selection) {
    svg.selectAll('g')
  }

}

API Reference

.create(elem, opts)
Creates and returns a svg element that is attached to elem. elem can be a DOM object or a selector.
The opts object will set the width and height of the svg if set, otherwise these attributes will remain null.

License

MIT