@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.

``js
import modules from "@d3plus/dom";
`

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

`html


`

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

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

`
returns this

`js
{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

---