d3-marcon

Margin conventions for d3-selection.

Installing

If you use NPM, npm install d3-marcon. Otherwise, download the latest release. You can also load directly from unpkg. You may use the entire D3.js library or, at a minimum, d3-selection.

<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://unpkg.com/d3-marcon/build/d3-marcon.min.js"></script>
<script>
 
var m = d3.marcon()
    .top(10)
    .bottom(10)
    .left(10)
    .right(10);
 
m.render();
 
m.svg().append("rect")
    .attr("width", m.innerWidth())
    .attr("height", m.innerHeight())
    .style("fill", "steelblue");
 
</script> 

A live example on bl.ocks.org.

API Reference

# d3.marcon([options]) <>

Constructs a visualization generator, or viz, on which you can set and get the dimensions and margins, and append an svg element with a nested g to a DOM element.

# viz.element([element]) <>

Selects a DOM element to append the viz to. Defaults to "body".

# viz.top([margin]) <>

Sets or gets the viz's top margin. Defaults to 0.

# viz.right([margin]) <>

Sets or gets the viz's right margin. Defaults to 0.

# viz.bottom([margin]) <>

Sets or gets the viz's bottom margin. Defaults to 0.

# viz.left([margin]) <>

Sets or gets the viz's left margin. Defaults to 0.

# viz.width() <>

Sets or gets the viz's width. Defaults to 900.

# viz.height() <>

Sets or gets the viz's height. Defaults to 600.

# viz.innerWidth() <>

Gets the viz's innerWidth, which is equal to width - left - right.

# viz.innerHeight() <>

Gets the viz's innerHeight, which is equal to height - top - bottom.

# viz.render() <>

Renders the viz to the DOM.

# viz.svg() <>

Gets the svg element that contains the viz. Returns undefined if the viz has not yet been rendered.