@d3plus/dom

JavaScript functions for manipulating and analyzing DOM elements.

Installing

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

import modules from "@d3plus/dom";

In vanilla JavaScript, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/dom"></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.

API Reference

• assign - A deeply recursive version of Object.assign.
• attrize - Applies each key/value in an object as an attr.
• date - Parses numbers and strings to valid Javascript Date objects.
• elem - Manages the enter/update/exit pattern for a single DOM element.
• fontExists - Given either a single font-family or a list of fonts, returns the name of the first font that can be rendered, or false if none are installed on the user's machine.
• isObject - Detects if a variable is a javascript 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.
• rtl - Returns true if the HTML or body element has either the "dir" HTML attribute or the "direction" CSS property set to "rtl".
• stylize - Applies each key/value in an object as a style.
• htmlDecode - Strips HTML and "un-escapes" escape characters.
• textWidth - Given a text string, returns the predicted pixel width of the string when placed into DOM.

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}}

d3plus.attrize(elem, attrs) <>

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

This is a global function

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

d3plus.elem(selector, params) <>

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

This is a global function

d3plus.fontExists(font) <>

Given either a single font-family or a list of fonts, returns the name of the first font that can be rendered, or false if none are installed on the user's machine.

This is a global function

d3plus.isObject(item) <>

Detects if a variable is a javascript Object.

This is a global function

d3plus.parseSides(sides) <>

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

This is a global function

d3plus.prefix() <>

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

This is a global function

d3plus.rtl() <>

Returns true if the HTML or body element has either the "dir" HTML attribute or the "direction" CSS property set to "rtl".

This is a global function

d3plus.stylize(elem, styles) <>

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

This is a global function

d3plus.htmlDecode(input) <>

Strips HTML and "un-escapes" escape characters.

This is a global function

d3plus.textWidth(text, [style]) <>

Given a text string, returns the predicted pixel width of the string when placed into DOM.

This is a global function