How to build a tree json in javascript

Question

I am playing around with D3 charts. One of the examples they provide is a chart to draw a tree structure (https://observablehq.com/@d3/tidy-tree)

I took this chart and embeded in Power BI as per example here (https://azurebi-docs.jppp.org/powerbi-visuals/d3js.html?tabs=docs%2Cdocs-open#sample), but I hit a wall with the data I currently have. The chart uses json as an input (https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json). The script to generate such tree structure json is as follows:

function toJSON(data) {
    var flare = { name: "ROOT", children: [] },
        levels = ["parentname","categoryname", "categoryname"];

    // For each data row, loop through the expected levels traversing the output tree
    data.forEach(function(d){
        // Keep this as a reference to the current level
        var depthCursor = flare.children;
        // Go down one level at a time
        levels.forEach(function( property, depth ){

            // Look to see if a branch has already been created
            var index;
            depthCursor.forEach(function(child,i){
                if ( d[property] == child.name ) index = i;
            });
            // Add a branch if it isn't there
            if ( isNaN(index) ) {
                depthCursor.push({ name : d[property], children : []});
                index = depthCursor.length - 1;
            }
            // Now reference the new child array as we go deeper into the tree
            depthCursor = depthCursor[index].children;
            // This is a leaf, so add the last element to the specified branch
            if ( depth === levels.length - 1 ) depthCursor.push({ name : d.product, size : d.revenue });
        });
    });
    // End of conversion
    return flare;
}

The problem I am facing is that my data is of a different struture... The script assumes that levels variable consists of all levels. However my data structure is such, that every row has a name, i.e. CategoryName and an indicator to the parent, i.e. ParentName from the same table. So effectively, the records are

CategoryName | ParentName
Category 1
Category 2 | Category 1
Category 3 | Category 2
Category 4 | Category 2

How should I approch modification of provided javascript to build up a json based on the data structure I currently have?

Thanks for any kind of support or refernces I could base on.

Edit

The format of the data is:

data = [
  {categoryname: 'Category 1', parentname: 'null'},
  {categoryname: 'Category 2', parentname: 'Category 1'},
  {categoryname: 'Category 3', parentname: 'Category 2'},
  {categoryname: 'Category 4', parentname: 'Category 2'},
];

The whole PowerBI D3 script looks like this:

/* 
 * All D3 visuals run in a frame with the following elements/variables:
 * 
 * SVG element: 
 * - <svg xmlns="http://www.w3.org/2000/svg" class="chart" id="chart" >
 * 
 * pbi object:
 * - 'dsv'    : function that retrieves the data via the provided callback: pbi.dsv(callback)
                e.g. pbi.dsv(function(data) { //Process data function });
 * - 'height' : height of the sandbox frame
 * - 'width'  : width of the sandbox frame
 * - 'colors' : color array with 8 colors; changable via options
 * 
 * Code is based on: https://bl.ocks.org/mbostock/4339083
 */

// ADD: translate function for the data 
function toJSON(data) {
    var flare = { name: "ROOT", children: [] },
        levels = ["parentname","categoryname", "categoryname"];

    // For each data row, loop through the expected levels traversing the output tree
    data.forEach(function(d){
        // Keep this as a reference to the current level
        var depthCursor = flare.children;
        // Go down one level at a time
        levels.forEach(function( property, depth ){

            // Look to see if a branch has already been created
            var index;
            depthCursor.forEach(function(child,i){
                if ( d[property] == child.name ) index = i;
            });
            // Add a branch if it isn't there
            if ( isNaN(index) ) {
                depthCursor.push({ name : d[property], children : []});
                index = depthCursor.length - 1;
            }
            // Now reference the new child array as we go deeper into the tree
            depthCursor = depthCursor[index].children;
            // This is a leaf, so add the last element to the specified branch
            if ( depth === levels.length - 1 ) depthCursor.push({ name : d.product, size : d.revenue });
        });
    });
    // End of conversion
    return flare;
}

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = pbi.width - margin.left - margin.right,   // ALTER: Changed fixed width with the 'pbi.width' variable
    height = pbi.height - margin.top - margin.bottom; // ALTER: Changed fixed height with the 'pbi.height' variable

var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg =  d3.select("#chart")                           // ALTER: Select SVG object; no need to create it
    .attr("width", width + margin.left + margin.right)   // ALTER: Add complete width
    .attr("height", height + margin.top + margin.bottom) // ALTER: Add complete height
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// ALTER: Replaced the d3.json function with the pbi variant: pbi.dsv
pbi.dsv(function(data) {
    var flare = toJSON(data); // ALTER: add extra convertion step to parent/child JSON
    root = flare;
    root.x0 = height / 2;
    root.y0 = 0;

    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

    root.children.forEach(collapse);
    update(root);
});

d3.select(self.frameElement).style("height", height + margin.top + margin.bottom);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? pbi.colors[0] : pbi.colors[1]; });

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? pbi.colors[0] : pbi.colors[1]; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

will this help https://stackoverflow.com/questions/722668/traverse-all-the-nodes-of-a-json-object-tree-with-javascript — Muhammad Omer Aslam, Aug 22 '19 at 05:56
@MuhammadOmerAslam I don't think it does. I need to build the tree structure from the seamingly flat data, not browse through tree structure — Macin, Aug 22 '19 at 05:58

Gerardo Furtado · Answer 1 · 2019-09-06T01:43:42.603

It seems to me that your question is another case of XY problem: instead of asking about the creation of the hierarchy itself you're asking about a function you believe is necessary for creating that hierarchy.

You don't need that function to create a hierarchical structure. Based on you data, you can just use d3.stratify:

const csv = `CategoryName,ParentName
Category 1,
Category 2,Category 1
Category 3,Category 2
Category 4,Category 2`;

const data = d3.csvParse(csv);

const stratify = d3.stratify()
  .id(function(d) {
    return d.CategoryName;
  })
  .parentId(function(d) {
    return d.ParentName;
  });

let root = stratify(data);

console.log(root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Since you already have the data parsed, it's even easier:

const data = [{
    categoryname: 'Category 1',
    parentname: ''
  },
  {
    categoryname: 'Category 2',
    parentname: 'Category 1'
  },
  {
    categoryname: 'Category 3',
    parentname: 'Category 2'
  },
  {
    categoryname: 'Category 4',
    parentname: 'Category 2'
  },
];

const stratify = d3.stratify()
  .id(function(d) {
    return d.categoryname;
  })
  .parentId(function(d) {
    return d.parentname;
  });

let root = stratify(data);

console.log(root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

PS: use your browser's console to check the root object, not the Stack snippet one.

Thanks Gerardo, do you have any hints how this can be adjusted to how D3 plugin works with Power BI as per my reference? — Macin, Aug 22 '19 at 06:08
thats ok, I will try to adjust your idea, hopefuly PowerBI D3 plugin supports stratify. — Macin, Aug 22 '19 at 06:44

How to build a tree json in javascript

Edit

1 Answers1