M.linkHorizontal is not a function

[david-baghdasaryan97]

URL's https://d3js.org/d3.v7.min.js https://cdn.jsdelivr.net/npm/d3-org-chart@2 https://cdn.jsdelivr.net/npm/[email protected]/build/d3-flextree.js

Error src - d3-org-chart@2

[bumbeishvili]

That's strange. The only thought I have is that d3 was not loaded when that code run.

Can you provide an online example so I can check it?

For me, it seems to work for the linked versions.

You can copy this part and paste it into https://realtimehtml.com and you will see that it works

    <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>
    <div
      class="chart-container"
    ></div>

    <script>
      var chart;
      d3.csv(
        'https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv'
      ).then(data => {
        chart = new d3.OrgChart()
          .container('.chart-container')
          .data(data) 
          .render();
      });
    </script>

[david-baghdasaryan97]

let chart = new d3.OrgChart() This code work , accordingly d3 loaded when run code, but after return error , and chart not show

code e.g

     let chart = new d3.OrgChart()
            .container('.chart-container')
            .data(data)
            .nodeWidth(d => 250)
            .initialZoom(0.7)
            .nodeHeight(d => 175)
            .childrenMargin(d => 40)
            .compactMarginBetween(d => 15)
            .compactMarginPair(d => 80)
            .nodeContent(function (d, i, arr, state) {
             ...my html template 
            }
              chart.render(); 

[david-baghdasaryan97]

Sometimes return error

DEMO

[bumbeishvili]

@david-baghdasaryan97 can you provide online fiddle where this issue is reproduced?

You can extend this example - https://stackblitz.com/edit/web-platform-sgsxzp

[david-baghdasaryan97]

@bumbeishvili unfortunately I can't , but problem not in loaded d3 after loaded d3 return error.

My code similar to your example , please check video demo in previous commit