Skip to content

Latest commit

 

History

History
88 lines (63 loc) · 2.77 KB

api.md

File metadata and controls

88 lines (63 loc) · 2.77 KB
Raw

layer

Creates a D3.js layer on a given element with specified attributes.

Parameters

  • el d3.Selection parent D3 selection.
  • tag string HTML/SVG tag to create.
  • cls string class to apply to new elements.
  • data Function data-binding function. (optional, default (d)=>[d])

Examples

// Avoid using `.append()` on D3 selections! Use `layer()` instead.
// AVOID THIS
el.selectAll("g.nodes").append("g").attr("class", "nodes");

// USE THIS INSTEAD
import { layer } from "https://cdn.jsdelivr.net/npm/@gramex/chartbase@1";
layer(el, "g", "layer");
// To specify the data against the appended nodes:
// AVOID THIS
el.selectAll("g.nodes").data(data).append("g").attr("class", "nodes");

// USE THIS INSTEAD
import { layer } from "https://cdn.jsdelivr.net/npm/@gramex/chartbase@1";
layer(el, "g", "layer", data);

Returns d3.Selection layer of <${tag} class="${cls}">.

getSVG

Retrieves the closest SVG element, along with its width and height

Parameters

  • el (string | HTMLElement) The selector or HTML element.
  • width number? The width of the SVG. Optional, fallback to the closest SVG parent.
  • height number? The height of the SVG. Optional, fallback to the closest SVG parent.

Examples

// Set the default width and height of a chart based on the closest SVG element:
const { width, height } = getSVG("#chart-svg");
// If your function accepts an optional width or height parameter, pass it as defaults:
{ width, height } = getSVG("#chart-svg", width, height);
// If the element is not an SVG (e.g. `g#nodes`), you can access the closest SVG container by:
{ container } = getSVG("g#nodes");
// el may be a selector or a DOM element. To get the DOM element, use:
{ el } = getSVG("g#nodes");

Returns SVGSize { el, container, width, height }.

SVGSize

Type: Object

Properties

  • el HTMLElement The DOM element passed. If a string selector was passed, this is the result of document.querySelector.
  • container HTMLElement The closest SVG element.
  • width number The width of the SVG.
  • height number The height of the SVG.