Need help

77 views
Skip to first unread message

Fahad

unread,
Oct 11, 2021, 9:35:32 AM10/11/21
to d3-js
I am getting following error when i am running below code.

 Uncaught (in promise) Error: no root
    at e (VM2790 d3.v7.min.js:2)
    at t.OrgChart.setLayouts (d3-org-chart@2:43)
    at t.OrgChart.render (d3-org-chart@2:21)
    at Org.html:71

<html>
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <a
      target="_blank"
    >
      <img
        style="position:fixed;top:0;right:0;border:0;z-index:2;"
        width="149"
        height="149"
        alt="Fork me on GitHub"
      />
    </a>

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2"></script>
    <div
      class="chart-container"
      style=" height:1200px ;background-color:#FFFEFF"
    ></div>
    <link
      rel="stylesheet"
    />
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
      var chart;
 
      d3.json("https://213.42.147.136:8443/ords/eshdev_ws/REQUEST/EMP").then(function(data) {
        chart = new d3.OrgChart()
          .container('.chart-container')
          .data(data)
          .nodeHeight(d => 85)
          .nodeWidth(d => {
            return 220;
          })
          .childrenMargin(d => 50)
          .compactMarginBetween(d => 25)
          .compactMarginPair(d => 50)
          .neightbourMargin((a, b) => 25)
          .siblingsMargin(d => 25)
          .buttonContent(({ node, state }) => {
            return `<div style="px;color:#716E7B;border-radius:5px;padding:4px;font-size:10px;margin:auto auto;background-color:white;border: 1px solid #E4E2E9"> <span style="font-size:9px">${
              node.children
                ? `<i class="fas fa-angle-up"></i>`
                : `<i class="fas fa-angle-down"></i>`
            }</span> ${node.data._directSubordinates}  </div>`;
          })
          .linkUpdate(function(d, i, arr) {
            d3.select(this)
              .attr('stroke', d =>
                d.data._upToTheRootHighlighted ? '#152785' : '#E4E2E9'
              )
              .attr('stroke-width', d =>
                d.data._upToTheRootHighlighted ? 5 : 1
              );

            if (d.data._upToTheRootHighlighted) {
              d3.select(this).raise();
            }
          })
          .nodeContent(function(d, i, arr, state) {
            const color = '#FFFFFF';return `
            <div style="font-family: 'Inter', sans-serif;background-color:${color}; position:absolute;margin-top:-1px; margin-left:-1px;width:${d.width}px;height:${d.height}px;border-radius:10px;border: 1px solid #E4E2E9">
               <div style="background-color:${color};position:absolute;margin-top:-25px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
               <img src=" ${
                 d.data.imageUrl
               }" style="position:absolute;margin-top:-20px;margin-left:${20}px;border-radius:100px;width:40px;height:40px;" />
               
              <div style="color:#08011E;position:absolute;right:20px;top:17px;font-size:10px;"><i class="fas fa-ellipsis-h"></i></div>

              <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:32px"> ${
                d.data.name
              } </div>
              <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
                d.data.positionName
              } </div>


           </div>
  `;
          })
          .render();

          console.log(data);
     });

    </script>
  </body>
</html>

Reply all
Reply to author
Forward
0 new messages