Awesome

d3plus-common

Common functions and methods used across D3plus modules.

Installing

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

import modules from "d3plus-common";

d3plus-common 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-common@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

• BaseClass - An abstract class that contains some global methods and functionality.

• accessor - Wraps an object key in a simple accessor function.
• assign - A deeply recursive version of Object.assign.
• attrize - Applies each key/value in an object as an attr.
• closest - Finds the closest numeric value in an array.
• configPrep - Preps a config object for d3plus data, and optionally bubbles up a specific nested type. When using this function, you must bind a d3plus class' this context.
• constant - Wraps non-function variables in a simple return function.
• elem - Manages the enter/update/exit pattern for a single DOM element.
• isObject - Detects if a variable is a javascript Object.
• merge - Combines an Array of Objects together and returns a new Object.
• parseSides - Converts a string of directional CSS shorthand values into an object with the values expanded.
• prefix - Returns the appropriate CSS vendor prefix, given the current browser.
• stylize - Applies each key/value in an object as a style.
• unique - ES5 implementation to reduce an Array of values to unique instances.
• uuid - Returns a unique identifier.

• RESET - String constant used to reset an individual config property.

<a name="BaseClass"></a>

BaseClass <>

This is a global class.

• BaseClass
  • .config([value]) ↩︎
  • .locale([value]) ↩︎
  • .on([typenames], [listener]) ↩︎
  • .translate([value]) ↩︎

<a name="BaseClass.config" href="#BaseClass.config">#</a> BaseClass.config([value]) <>

If value is specified, sets the methods that correspond to the key/value pairs and returns this class. If value is not specified, returns the current configuration.

This is a static method of <code>BaseClass</code>, and is chainable with other methods of this Class.

<a name="BaseClass.locale" href="#BaseClass.locale">#</a> BaseClass.locale([value]) <>

Sets the locale used for all text and number formatting. This method supports the locales defined in d3plus-format. The locale can be defined as a complex Object (like in d3plus-format), a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale from d3plus-format.

This is a static method of <code>BaseClass</code>, and is chainable with other methods of this Class.

{
        separator: "",
        suffixes: ["y", "z", "a", "f", "p", "n", "µ", "m", "", "k", "M", "B", "t", "q", "Q", "Z", "Y"],
        grouping: [3],
        delimiters: {
          thousands: ",",
          decimal: "."
        },
        currency: ["$", ""]
      }

<a name="BaseClass.on" href="#BaseClass.on">#</a> BaseClass.on([typenames], [listener]) <>

Adds or removes a listener to each object for the specified event typenames. If a listener is not specified, returns the currently assigned listener for the specified event typename. Mirrors the core d3-selection behavior.

This is a static method of <code>BaseClass</code>, and is chainable with other methods of this Class.

By default, listeners apply globally to all objects, however, passing a namespace with the class name gives control over specific elements:

new Plot
  .on("click.Shape", function(d) {
    console.log("data for shape clicked:", d);
  })
  .on("click.Legend", function(d) {
    console.log("data for legend clicked:", d);
  })

<a name="BaseClass.translate" href="#BaseClass.translate">#</a> BaseClass.translate([value]) <>

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.

This is a static method of <code>BaseClass</code>, and is chainable with other methods of this Class. For example, if we wanted to only change the string "Back" and allow all other string to return in English:

.translate(function(d) {
  return d === "Back" ? "Get outta here" : d;
})

<a name="accessor"></a>

d3plus.accessor(key, [def]) <>

Wraps an object key in a simple accessor function.

This is a global function.

this

accessor("id");
    

returns this

function(d) {
  return d["id"];
}

<a name="assign"></a>

d3plus.assign(...objects) <>

A deeply recursive version of Object.assign.

This is a global function. this

assign({id: "foo", deep: {group: "A"}}, {id: "bar", deep: {value: 20}}));
    

returns this

{id: "bar", deep: {group: "A", value: 20}}

<a name="attrize"></a>

d3plus.attrize(elem, attrs) <>

Applies each key/value in an object as an attr.

This is a global function.

<a name="closest"></a>

d3plus.closest(n, arr) <>

Finds the closest numeric value in an array.

This is a global function.

<a name="configPrep"></a>

d3plus.configPrep([config], [type], [nest]) <>

Preps a config object for d3plus data, and optionally bubbles up a specific nested type. When using this function, you must bind a d3plus class' this context.

This is a global function.

<a name="constant"></a>

d3plus.constant(value) <>

Wraps non-function variables in a simple return function.

This is a global function. this

constant(42);
    

returns this

function() {
  return 42;
}

<a name="elem"></a>

d3plus.elem(selector, params) <>

Manages the enter/update/exit pattern for a single DOM element.

This is a global function.

<a name="isObject"></a>

d3plus.isObject(item) <>

Detects if a variable is a javascript Object.

This is a global function.

<a name="merge"></a>

d3plus.merge(objects, aggs) <>

Combines an Array of Objects together and returns a new Object.

This is a global function.

this

merge([
  {id: "foo", group: "A", value: 10, links: [1, 2]},
  {id: "bar", group: "A", value: 20, links: [1, 3]}
]);
    

returns this

{id: ["bar", "foo"], group: "A", value: 30, links: [1, 2, 3]}

<a name="parseSides"></a>

d3plus.parseSides(sides) <>

Converts a string of directional CSS shorthand values into an object with the values expanded.

This is a global function.

<a name="prefix"></a>

d3plus.prefix() <>

Returns the appropriate CSS vendor prefix, given the current browser.

This is a global function.

<a name="stylize"></a>

d3plus.stylize(elem, styles) <>

Applies each key/value in an object as a style.

This is a global function.

<a name="unique"></a>

d3plus.unique(arr, [accessor]) <>

ES5 implementation to reduce an Array of values to unique instances.

This is a global function.

this

unique(["apple", "banana", "apple"]);
    

returns this

["apple", "banana"]

<a name="uuid"></a>

d3plus.uuid() <>

This is a global function.

<a name="RESET"></a>

RESET <>

String constant used to reset an individual config property.

This is a global constant.

_{Documentation generated on Thu, 03 Oct 2024 16:19:47 GMT}