@gramex/chartbase
v1.0.2
Published
Base utilities for charts
Downloads
29
Maintainers
Readme
@gramex/chartbase
Base utilities for charts
Example
import { layer, getSVG } from "https://cdn.jsdelivr.net/npm/@gramex/chartbase@1";
// Create a new g.layer under <svg id="chart-svg"> ONLY IF it does not exist
layer(d3.select("svg#chart-svg"), "g", "layer");
// Get the viewBox width and height of <svg id="chart-svg">
const { width, height } = getSVG("svg#chart-svg");
Installation
Install via npm
:
npm install @gramex/chartbase
Use locally as an ES module:
<script type="module">
import chartbase from "./node_modules/@gramex/chartbase/dist/chartbase.js";
</script>
Use via CDN as an ES Module:
<script type="module">
import chartbase from "https://cdn.jsdelivr.net/npm/@gramex/chartbase@1";
</script>
layer
Avoid using .append()
on D3 selections. Instead of:
// 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");
If you want 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);
getSVG
Set the default width and height of a chart based on the closest SVG element. For example:
const { width, height } = getSVG("#chart-svg");
If your function accepts a width or height parameter that may be undefined, pass it as:
// Update the width and height only if they are undefined
{ 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");
Element can be a selector - it need not be a DOM element. To access the DOM element, use:
{ el } = getSVG("g#nodes");
API
Release notes
- 1.0.1: 24 Nov 2023. Fix
getSVG()
width and height calculation - 1.0.0: 31 Oct 2023. Initial release
Authors
Anand S [email protected]