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.