https://github.com/harrystevens/d3-marcon
Margin conventions for d3-selection.
https://github.com/harrystevens/d3-marcon
Last synced: about 1 year ago
JSON representation
Margin conventions for d3-selection.
- Host: GitHub
- URL: https://github.com/harrystevens/d3-marcon
- Owner: HarryStevens
- License: bsd-3-clause
- Created: 2017-07-23T07:50:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T17:35:20.000Z (over 3 years ago)
- Last Synced: 2025-05-06T14:37:10.391Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 96.7 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-marcon
[Margin conventions](https://bl.ocks.org/mbostock/3019563) for [d3-selection](https://github.com/d3/d3-selection).
## Installing
If you use NPM, `npm install d3-marcon`. Otherwise, download the [latest release](https://github.com/HarryStevens/d3-marcon/tree/master/build).
You can also load directly from [unpkg](https://unpkg.com/d3-marcon/build/d3-marcon.min.js). You may use the entire [D3.js library](https://d3js.org/) or, at a minimum, [d3-selection](https://github.com/d3/d3-selection).
```html
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");
```
[A live example on bl.ocks.org](https://bl.ocks.org/HarryStevens/de1069536e00256d7aa82299fac0f3d5).
## API Reference
# d3.marcon([options]) [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js "Source")
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]) [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L53 "Source")
Selects a DOM element to append the viz to. Defaults to `"body"`.
# viz.top([margin]) [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L17 "Source")
Sets or gets the viz's top margin. Defaults to `0`.
# viz.right([margin]) [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L29 "Source")
Sets or gets the viz's right margin. Defaults to `0`.
# viz.bottom([margin]) [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L35 "Source")
Sets or gets the viz's bottom margin. Defaults to `0`.
# viz.left([margin]) [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L23 "Source")
Sets or gets the viz's left margin. Defaults to `0`.
# viz.width() [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L41 "Source")
Sets or gets the viz's width. Defaults to `900`.
# viz.height() [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L47 "Source")
Sets or gets the viz's height. Defaults to `600`.
# viz.innerWidth() [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L59 "Source")
Gets the viz's innerWidth, which is equal to `width - left - right`.
# viz.innerHeight() [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L63 "Source")
Gets the viz's innerHeight, which is equal to `height - top - bottom`.
# viz.render() [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L71 "Source")
Renders the viz to the DOM.
# viz.svg() [<>](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L67 "Source")
Gets the `svg` element that contains the viz. Returns `undefined` if the viz has not yet been rendered.