API Reference
- cm.render - render a SVG element.
- cm.renderMark - render a mark.
- cm.svg - create a SVG mark.
- cm.html - create a HTML mark.
- cm.tag - create a new mark factory.
- mark.with - append children to mark.
cm.render(options)
js
cm.render({
width: 200,
height: 100,
style_background: "black",
marks: [
cm.svg("circle", {
cx: 100,
cy: 50,
r: 40,
fill: "white",
}),
],
});
cm.renderMark(mark)
js
cm.renderMark(
cm.html("span", {
textContent: "Hello Charming.js",
style_color: "red",
}),
);
cm.svg(tag[, data[, options]])
js
cm.render({
width: 100,
height: 50,
marks: [
cm.svg("circle", [1, 2, 3], {
cx: (d) => d * 30,
cy: 25,
r: 10,
}),
],
});
cm.html(tag[, data[, options]])
js
const table = [
[11975, 5871, 8916, 2868],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907],
];
cm.renderMark(
cm.html("table").with([
cm.html("tr", table).with([
cm.html("td", (row) => row, {
textContent: (d) => d,
}),
]),
]),
);
cm.tag(namespace)
js
const math = cm.tag("http://www.w3.org/1998/Math/MathML");
cm.renderMark(
math("math").with([
math("mrow").with([
math("mrow").with([
math("mi", {textContent: "x"}),
math("mo", {textContent: "∗"}),
math("mn", {textContent: "2"}),
]),
math("mo", {textContent: "+"}),
math("mi", {textContent: "y"}),
]),
]),
);
mark.with(children)
js
const svg = cm.svg;
cm.render({
width: 100,
height: 50,
marks: [
svg("g", [1, 2, 3], {
transform: (d) => `translate(${d * 30},${25})`,
fill: "steelblue",
}).with([
svg("circle", [1, 2, 3], {
r: 10,
}),
]),
],
});