d3-container

Graphic container

A D3 plugin for the margin convention. See block, http://bl.ocks.org/binaworks/9dce0a385915e8953a45cc6be7fbde42.

API Reference

# container(context)

Create container content, g element(s) appended to the given context, a D3 selection. Content is offset from context according to the container's left and top margin specification.

# container.contentHeight()

If content has been created, returns the content height. Otherwise, returns 0.

# container.contentWidth()

If content has been created, returns the content width. Otherwise, returns 0.

# container.height(size)

If size is specified, sets the container height to the specified value and returns the container. If size is not specified, returns the current height, which defaults to 0.

# container.margin(top,right,bottom, left)

If arguments are specified, updates container margin sizes as specified and returns the container. Margin sizes default to 0 and are specified as in CSS.

• If only top is specified, then top, right, bottom and left margin sizes are set to top.
• If top and right are specified, then top and bottom margins are set to top, and right and left margins are set to right.
• If only top, right and left are specified, then top and bottom margins are set to top, right margin is set to right and left margins is set to left.

If arguments are not specified, returns the container's margin object which has getter/setter functions for top, right, bottom, and left sizes.

# container.width(size)

If size is specified, sets the container width to the specified value and returns the container. If size is not specified, returns the current width, which defaults to 0.

# container.content()

Returns container content created by container(context).

Sample Usage

var container = d3_container.container();

container
    .height(1000)
    .width(650)
    .margin(30, 10, 10);
    
svg.call(container);

var content = container.content();

content.append("rect")
       .attr("height", container.contentHeight())
       .attr("width", container.contentWidth())
       .attr("stroke", "green")
       .attr("stroke-width",5);

A container can be used to generate g elements for mutlple charts as in this example: Local Variables with d3-container.