Download the library from the third-party library's site.
Import the library by its static resource name.
For example, if you named the static resource
Import methods from the
Load the library and call its functions in a
If a call to
appendChild() manipulates the DOM, styling isn’t applied to the appended element.
When using these libraries in a Lightning web component, add
lwc:dom="manual" directive to an empty native HTML element. The owner of the component calls
appendChild() on that element to manually insert the DOM.
The D3 code is the
libsD3 component from the lwc-recipes repo.
Download D3 at d3js.com. Upload
d3.zip to your Salesforce organization as a static resource.
First, create a component to contain the map. Here, the container is an empty
lwc:dom="manual" directive tells LWC that the DOM in the
<svg> element has been inserted manually.
lightning/platformResourceLoader. Import the
d3 static resource as well. Notice that
D3 is the static resource reference for loading the resources, and
d3 is the name of the static resource uploaded to Salesforce.
To create the graph, invoke
renderedCallback() on the first render. Using
renderedCallback() ensures that the page loads and renders the container before the graph is created.
loadScript return promises. Use
Promise.all() to aggregate the results and ensure that both files are resolved before invoking the callback. The
then() callback is invoked only after the load completes and only if no error occurs. You can optionally provide a
catch() callback to handle any potential error occurring during the load process.
To initialize the graph in the promise callback, call
initializeD3(), which reaches into the DOM and gets a reference to the container that displays the graph, here an
In a Lightning web component, you can’t use
document to query for DOM elements. Instead, use
this.template. For example, this D3 code sample uses
this.template.querySelector('svg.d3'). See DOM Access Containment.
- Component Library: lightning-platform-resource-loader
- Access Static Resources
- HTML Template Directives