Skip to content

53seven/d3-svg

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Micromodule to return a svg that is selected by d3

Resources

License

Stars

Watchers

Forks

Packages

No packages published