CODEWITHSUNDEEP
javascriptjsond3.jschartsorgchart
Marty
Marty

Reputation: 312

How to work with JSON data - D3 org chart?

I'm new to D3 and using v7 bumbeishvili / org-chart and spent already a few hours to find out dealing with this below listed JSON data.

I want to create an organization chart using JSON data

want to use this json data https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/redesignedChartLongData.json

Example: jsfiddle Example

<html>

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

<body>
  <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" style="height: 1200px; background-color: #f6f6f6"></div>

  <script>
    var chart;
    d3.json('https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/redesignedChartLongData.json')
      .then((dataFlattened) => {
        console.log(dataFlattened);
        chart = new d3.OrgChart()
          .container('.chart-container')
          .data(dataFlattened)
          .nodeWidth((d) => 250)
          .initialZoom(0.7)
          .nodeHeight((d) => 175)
          .childrenMargin((d) => 40)
          .compactMarginBetween((d) => 15)
          .compactMarginPair((d) => 80)
          .nodeContent(function(d, i, arr, state) {
            return `
            <div style="padding-top:30px;background-color:none;margin-left:1px;height:${
              d.height
            }px;border-radius:2px;overflow:visible">
              <div style="height:${
                d.height - 32
              }px;padding-top:0px;background-color:white;border:1px solid lightgray;">

                <img src=" ${
                  d.data.imageUrl
                }" style="margin-top:-30px;margin-left:${d.width / 2 - 30}px;border-radius:100px;width:60px;height:60px;" />

               <div style="margin-right:10px;margin-top:15px;float:right">${
                 d.data.id
               }</div>
               
               <div style="margin-top:-30px;background-color:#3AB6E3;height:10px;width:${
                 d.width - 2
               }px;border-radius:1px"></div>

               <div style="padding:20px; padding-top:35px;text-align:center">
                   <div style="color:#111672;font-size:16px;font-weight:bold"> ${
                     d.data.name
                   } </div>
                   <div style="color:#404040;font-size:16px;margin-top:4px"> ${
                     d.data.positionName
                   } </div>
               </div> 
               <div style="display:flex;justify-content:space-between;padding-left:15px;padding-right:15px;">
                 <div > Manages:  ${d.data._directSubordinates} 👤</div>  
                 <div > Oversees: ${d.data._totalSubordinates} 👤</div>    
               </div>
              </div>     
      </div>
  `;
          })
          .render();
      });
  </script>
</body>

</html>

d3.json('https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/redesignedChartLongData.json'
).then((dataFlattened) => {
    chart = new d3.OrgChart()
    .data(dataFlattened)
    ...
    .nodeContent(function (d, i, arr, state) {
    return `...`
    })
    .render();
});

currently, in the fiddle example, I'm facing no root error

d3.v7.min.js:2 Uncaught (in promise) Error: no root
    at r (d3.v7.min.js:2:264610)
    at t.OrgChart.setLayouts (d3-org-chart@2:43:1375)
    at t.OrgChart.render (d3-org-chart@2:21:6842)
    at ?editor_console=true:174:12

Could anyone point out if I'm doing wrong, any suggestions?

Would appreciate some guidance!

Upvotes: 2

Views: 2269

Answers (1)

Enhuush 0704
Enhuush 0704

Reputation: 11

I think that the JSON should be in a form like this

       {

            name: "CEO",
            id: "1",
            parentId: "",
          },
          {
            name: "CTO",
            id: "2",
            parentId: "1",
          },
          {
            name: "COO",
            id: "3",
            parentId: "1",
          },
        ]`

Upvotes: 1

Related Questions