d3-chart-xybase

SVG chart base with X and Y axes on all 4 sides.

Installing

If you use NPM, npm install d3-chart-xybase. Otherwise, download the latest release. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3_chart_xybase global is exported:

<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-collection.v0.1.min.js"></script>
<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.5.min.js"></script>
<script src="https://d3js.org/d3-time.v0.2.min.js"></script>
<script src="https://d3js.org/d3-time-format.v0.3.min.js"></script>
<script src="https://d3js.org/d3-scale.v0.7.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.2.min.js"></script>
<script src="https://d3js.org/d3-axis.v0.3.min.js"></script>
<script src="build/d3-chart-xybase.js"></script>
<script>

var chart = d3_chart_xybase.chart_xybase()

</script>

Running the example

After running npm install in the root folder, to run the example start a simple server in the root folder. For example, on linux/mac you can run python -m SimpleHTTPServer 8888 and open http://localhost:8888/example/chart_xybase.html

API Reference

# d3_chart_xybase.chart_xybase()

Constructs a new chart base, defaults to left and bottom axes active, returns a chart. (Must provide chart with scales for the axes that are active.)

# chart(context)

Render the chart base to the given context, which may be either a selection of SVG containers (either SVG or G elements) or a corresponding transition.

# chart.axisBottom([axis])

If axis is provided, sets chart's axisBottom to this axis and returns the chart.

If no argument passed, returns chart's axisBottom.

# chart.axisTop([axis])

If axis is provided, sets chart's axisTop to this axis and returns the chart.

If no argument passed, returns chart's axisTop.

# chart.axisLeft([axis])

If axis is provided, sets chart's axisLeft to this axis and returns the chart.

If no argument passed, returns chart's axisLeft.

# chart.axisRight([axis])

If axis is provided, sets chart's axisRight to this axis and returns the chart.

If no argument passed, returns chart's axisRight.

# chart.scaleBottom([scale])

If scale is provided, sets chart's scaleBottom to this scale and returns the chart.

If no argument passed, returns chart's scaleBottom.

# chart.scaleTop([scale])

If scale is provided, sets chart's scaleTop to this scale and returns the chart.

If no argument passed, returns chart's scaleTop.

# chart.scaleLeft([scale])

If scale is provided, sets chart's scaleLeft to this scale and returns the chart.

If no argument passed, returns chart's scaleLeft.

# chart.scaleRight([scale])

If scale is provided, sets chart's scaleRight to this scale and returns the chart.

If no argument passed, returns chart's scaleRight.

# chart.renderAxisBottom([bool])

If true, renders bottom axis (bottomScale must be set) and returns the chart.

If no argument passed, returns renderAxisBottom setting.

Default: true

# chart.renderAxisTop([bool])

If true, renders bottom axis (bottomScale must be set) and returns the chart.

If no argument passed, returns renderAxisTop setting.

Default: false

# chart.renderAxisLeft([bool])

If true, renders bottom axis (bottomScale must be set) and returns the chart.

If no argument passed, returns renderAxisLeft setting.

Default: true

# chart.renderAxisRight([bool])

If true, renders bottom axis (bottomScale must be set) and returns the chart.

If no argument passed, returns renderAxisRight setting.

Default: false

# chart.labelBottom([string])

If string is provided, sets bottom axis' labe to string and returns the chart.

If no argument passed, returns current axis label.

# chart.labelTop([string])

If string is provided, sets bottom axis' labe to string and returns the chart.

If no argument passed, returns current axis label.

# chart.labelLeft([string])

If string is provided, sets bottom axis' labe to string and returns the chart.

If no argument passed, returns current axis label.

# chart.labelRight([string])

If string is provided, sets bottom axis' labe to string and returns the chart.

If no argument passed, returns current axis label.

# chart.labelPosBottom(['(insides|outside)', '(left|center|right)'])

Sets bottom axis label's position inside/outside of chart, and left/center/right aligned on the axis and returns the chart.

If no argument passed, returns current axis label positions.

Default: ['inside', 'right']

# chart.labelPosTop(['(insides|outside)', '(left|center|right)'])

Sets bottom axis label's position inside/outside of chart, and left/center/right aligned on the axis and returns the chart.

If no argument passed, returns current axis label positions.

Default: ['inside', 'right']

# chart.labelPosLeft(['(insides|outside)', '(top|middle|bottom)'])

Sets bottom axis label's position inside/outside of chart, and top/middle/bottom aligned on the axis and returns the chart.

If no argument passed, returns current axis label positions.

Default: ['inside', 'top']

# chart.labelPosRight(['(insides|outside)', '(top|middle|bottom)'])

Sets bottom axis label's position inside/outside of chart, and top/middle/bottom aligned on the axis and returns the chart.

If no argument passed, returns current axis label positions.

Default: ['inside', 'top']

# chart.tickSizeBottom([size])

If size is specified, sets the inner and outer tick size to the specified value and returns the chart.

If no argument passed, returns current axis tick size.

Default: height => [-height, 1] // where height argument is the overall height minus the margins.

# chart.tickSizeTop([size])

If size is specified, sets the inner and outer tick size to the specified value and returns the chart.

If no argument passed, returns current axis tick size.

Default: height => [-height, 1] // where height argument is the overall height minus the margins.

# chart.tickSizeLeft([size])

If size is specified, sets the inner and outer tick size to the specified value and returns the chart.

If no argument passed, returns current axis tick size.

Default: width => [-width, 1] // where width argument is the overall width minus the margins.

# chart.tickSizeRight([size])

If size is specified, sets the inner and outer tick size to the specified value and returns the chart.

If no argument passed, returns current axis tick size.

Default: width => [-width, 1] // where width argument is the overall width minus the margins.

# chart.ticksBottom([arguments])

If arguments are specified, stores the specified arguments for subsequent use in generating ticks and returns the chart. The arguments will later be passed to scale.ticks to generate tick values (unless tick values are specified explicitly via axis.tickValues). These arguments are also passed to the scale’s tickFormat method to generate a tick format (unless a tick format is specified explicitly via axis.tickFormat). If no arguments are specified, returns the current tick arguments, which defaults to the empty array.

Suitable arguments depends on the associated scale: for a quantitative scale, you might specify a suggested tick count such as [20] or a tick count and a tick format specifier such as [10, "$,.2f"]; for a time scale, a time interval such as [d3.timeMinute, 15] might be appropriate.

If no argument passed, returns current axis tick arguments.

Default: width => [Math.round( width / 80 )] // where width argument is the overall width minus the margins.

# chart.ticksTop([arguments])

If arguments are specified, stores the specified arguments for subsequent use in generating ticks and returns the chart.

If no argument passed, returns current axis tick arguments.

Default: width => [Math.round( width / 80 )] // where width argument is the overall width minus the margins.

# chart.ticksLeft([arguments])

If arguments are specified, stores the specified arguments for subsequent use in generating ticks and returns the chart.

If no argument passed, returns current axis tick arguments.

Default: height => [Math.round( height / 40 )] // where height argument is the overall height minus the margins.

# chart.ticksRight([arguments])

If arguments are specified, stores the specified arguments for subsequent use in generating ticks and returns the chart.

If no argument passed, returns current axis tick arguments.

Default: height => [Math.round( height / 40 )] // where height argument is the overall height minus the margins.

# chart.width(number)

If width is passed, sets chart's overall width to value provided.

If no argument passed, returns current chart's width.

Default: 600

# chart.height(number)

If height is passed, sets chart's overall height to value provided.

If no argument passed, returns current chart's height.

Default: 400

# chart.margin(object)

If margin is passed, sets some or all of the chart's margins.

If no argument passed, returns current chart's margin.

Default: { "top": 10, "right": 10, "bottom": 30, "left": 40 }