d3-base

d3-base

Create a responsive SVG that resizes to the container.

Example

var base = require("d3-base");

var b = base("#container", {
	height: 400
});

var b = base("#container", {
	aspect: 0.5
});

Options

You must pass base a selector representing the parent element in width the SVG will be created. You can optionally pass an object as a second argument representing options. These are:

property	description
width	The initial width of the SVG. Defaults to width of parent
height	The initial height of the SVG. Defaults to the aspect ratio.
aspect	The aspect ratio of the SVG. Defaults to 0.618, approximately the golden ratio
resize	Info about how the SVG should scale. Current options are: auto: Set the viewBox to the initial width and height, thus scaling automatically according to the SVG specification
onResize	callback function to fire whenever the SVG resizes. This function will receive three arguments: the (new) width, height, and scale, which is (current width) / (original width)

A callback example

var base = require("d3-base");

var b = base("#container", {
	onResize: function(w, h, s) {
		console.log("Scale is " + s);
	}
});