I'm trying to create an orgChart in LWC to represent how my objects are set up.

I found the following library to do it : https://github.com/bumbeishvili/org-chart

When looking at the examples, he loads the following libraries :

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-flextree.js"></script>

To replicate this I downloaded these files, uploaded each of them separately as ressources and then loaded them like this :

import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import d3v7min from '@salesforce/resourceUrl/d3v7min';
import d3orgchart from '@salesforce/resourceUrl/d3orgchart';
import d3flextree from '@salesforce/resourceUrl/d3flextree';

        loadScript(this, d3v7min)
            .then(()=> {
                loadScript(this, d3orgchart)
                    .then(()=> {
                        loadScript(this, d3flextree)
                            .then(()=> {
                            .catch(error =>{


But I get an error when I try to initialize my chart :

        chart = new d3.OrgChart()

The error is the following one :

TypeError: d.flextree is not a function at t.OrgChart.render (d3orgchart:formatted:322:34)

It seems like the code cannot access the function flextree which is defined in another library. Any suggestion on how to solve this ?

When looking at the project on NPM, it seems that it has a lot of D3 dependencies : https://www.npmjs.com/package/d3-org-chart?activeTab=dependencies

Are these dependencies not included in the main D3 file ? I was thinking of downloading them and adding them to my js file but then each of those also have their own dependencies so I would have to download those as well.

Thank you for your help !


You must log in to answer this question.

Browse other questions tagged .