npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

d3plus-axis

v1.2.24

Published

Beautiful javascript scales and axes.

Downloads

4,792

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

davelandrydavelandry

Keywords

axisd3d3plusdatavisualization

Readme

d3plus-axis

Beautiful javascript scales and axes.

Installing

If using npm, npm install d3plus-axis. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-axis";

d3plus-axis can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-axis@1"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. :beers:

API Reference

  • date - Parses numbers and strings to valid Javascript Date objects.

Axis <>

This is a global class, and extends all of the methods and functionality of BaseClass.

# new Axis()

Creates an SVG scale based on an array of data.

# Axis.render([callback]) <>

Renders the current Axis to the page. If a callback is specified, it will be called once the legend is done drawing.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.align([value]) <>

If value is specified, sets the horizontal alignment to the specified value and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.barConfig([value]) <>

If value is specified, sets the axis line style and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.data([value]) <>

An array of data points, which helps determine which ticks should be shown and which time resolution should be displayed.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.domain([value]) <>

If value is specified, sets the scale domain of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.duration([value]) <>

If value is specified, sets the transition duration of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.grid([value]) <>

If value is specified, sets the grid values of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.gridConfig([value]) <>

If value is specified, sets the grid config of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.gridLog([value]) <>

If value is specified, sets the grid behavior of the axis when scale is logarithmic and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.gridSize([value]) <>

If value is specified, sets the grid size of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.height([value]) <>

If value is specified, sets the overall height of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.labels([value]) <>

If value is specified, sets the visible tick labels of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.labelOffset([value]) <>

If value is specified, sets whether offsets will be used to position some labels further away from the axis in order to allow space for the text.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.labelRotation([value]) <>

If value is specified, sets whether whether horizontal axis labels are rotated -90 degrees.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.maxSize(_) <>

If value is specified, sets the maximum size allowed for the space that contains the axis tick labels and title.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.minSize(_) <>

If value is specified, sets the minimum size alloted for the space that contains the axis tick labels and title.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.orient([orient]) <>

If orient is specified, sets the orientation of the shape and returns the current class instance. If orient is not specified, returns the current orientation.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.outerBounds() <>

If called after the elements have been drawn to DOM, will returns the outer bounds of the axis content.

This is a static method of Axis.

{"width": 180, "height": 24, "x": 10, "y": 20}

# Axis.padding([value]) <>

If value is specified, sets the padding between each tick label to the specified number and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.paddingInner([value]) <>

If value is specified, sets the inner padding of band scale to the specified number and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.paddingOuter([value]) <>

If value is specified, sets the outer padding of band scales to the specified number and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.range([value]) <>

If value is specified, sets the scale range (in pixels) of the axis and returns the current class instance. The given array must have 2 values, but one may be undefined to allow the default behavior for that value.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.rounding([value]) <>

Sets the rounding method, so that more evenly spaced ticks appear at the extents of the scale. Can be set to "none" (default), "outside", or "inside".

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMinPrefix([value]) <>

Sets the prefix used for the minimum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMinSuffix([value]) <>

Sets the suffix used for the minimum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMaxPrefix([value]) <>

Sets the prefix used for the maximum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMaxSuffix([value]) <>

Sets the suffix used for the maximum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.scale([value]) <>

If value is specified, sets the scale of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.scalePadding([value]) <>

Sets the "padding" property of the scale, often used in point scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.shape([value]) <>

If value is specified, sets the tick shape constructor and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.shapeConfig([value]) <>

If value is specified, sets the tick style of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.tickFormat([value]) <>

If value is specified, sets the tick formatter and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.ticks([value]) <>

If value is specified, sets the tick values of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.tickSize([value]) <>

If value is specified, sets the tick size of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.tickSuffix([value]) <>

Sets the behavior of the abbreviations when you are using linear scale. This method accepts two options: "normal" (uses formatAbbreviate to determinate the abbreviation) and "smallest" (uses suffix from the smallest tick as reference in every tick).

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.timeLocale([value]) <>

Defines a custom locale object to be used in time scale. This object must include the following properties: dateTime, date, time, periods, days, shortDays, months, shortMonths. For more information, you can revise d3p.d3-time-format.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.title([value]) <>

If value is specified, sets the title of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.titleConfig([value]) <>

If value is specified, sets the title configuration of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.width([value]) <>

If value is specified, sets the overall width of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

AxisBottom <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisBottom()

Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base Axis class.

AxisLeft <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisLeft()

Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base Axis class.

AxisRight <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisRight()

Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base Axis class.

AxisTop <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisTop()

Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base Axis class.

d3plus.date(date) <>

Returns a javascript Date object for a given a Number (representing either a 4-digit year or milliseconds since epoch), a String representing a Quarter (ie. "Q2 1987", mapping to the last day in that quarter), or a String that is in valid dateString format. Besides the 4-digit year parsing, this function is useful when needing to parse negative (BC) years, which the vanilla Date object cannot parse.

This is a global function.

Documentation generated on Fri, 06 Dec 2024 20:23:10 GMT