Graphly D3Render Template
available since version 1.5.0
The renderTemplate method is a low level method that renders a template and returns SVGElement DOM nodes. It is used internally by the render method but can also be used directly to render a template without a simulation.
API
The renderTemplate method takes 3 arguments:
template- the template to renderdata- the node data to populate the template withconfig- the configuration to use for rendering
INFO
The template and data types are the same as known from the simulation API. The config type defines the context the template is to be rendered in and looks like this:
ts
type RenderConfig = {
theme: "light" | "dark";
scale: number;
};Usage
html
<svg style="width: 100%; height: 100%"></svg>ts
import { renderTemplate } from "@livereader/graphly-d3";
import "@livereader/graphly-d3/style.css";
import MyTemplate from "./templates/myTemplate";
const render = await renderTemplate(
MyTemplate,
{
id: "node1",
shape: {
type: "my-template",
scale: 1,
},
payload: {
title: "Hexagon",
color: "#9575cd",
},
},
{ theme: "light", scale: 1 }
);
document.getElementsByTagName("svg")[0]!.appendChild(render);
document.getElementsByTagName("svg")[0]!.setAttribute("transform", "translate(300, 300)");Showcase
INFO
This is the result of such a renderTemplate call used on the hexagon template. It does not use any simulation.