@d3plus/dom NPM

@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@3.0.0-alpha.3"></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