[Solved]-How to create an interactive collapsible tree diagram from csv with D3 and javascript?-d3.js

I have written the following that should do what you need it to. If not you can adjust it for your needs:

function convertToJsonTree(lines) {
  // create the base
  let parent = {};

  // iterate through the lines
  for (let i = 0; i < lines.length; i++) {
    let _s = lines[i].split(',');
    let _name = _s[0];
    let _parent = _s[1];
    // if the parents name is null, we must be at the base
    if (_parent === 'null') {
      // set the name
      parent.name = _name;
      // get rid of the current line
      delete lines[i];
      let subLines = lines.filter(function(el) {
        return el != null;
      });

      // check for the first set of children
      for (let j = 0; j < subLines.length; j++) {
        let __s = subLines[j].split(',');
        let __name = __s[0];
        let __parent = __s[1];

                // if there's a child that has the current level as the parent
        if (parent && parent.name === __parent) {
                    // if the children array is undefined, create an array
          if (!parent.children)
            parent.children = [];
                    // create the child
          let child = {
            name: __name
          };
                    // add it to the parents children
          parent.children.push(child);

          // remove the line that was already checked
          delete subLines[j];
          let _subLines = subLines.filter(function(el) {
            return el != null;
          });

                    // check if the child has any children
          getChildren(child, _subLines);
        }
      }
    }
  }
  return parent;
}

function getChildren(parent, lines) {

  for (let i = 0; i < lines.length; i++) {
    let _s = lines[i].split(',');
    let _name = _s[0];
    let _parent = _s[1];

    // if there's a child that has the current level as the parent
    if (parent && parent.name === _parent) {

      // if the children array is undefined, create an array
      if (!parent.children)
        parent.children = [];

      // create the child
      let child = {
        name: _name
      };

      // add it to the parents children
      parent.children.push(child);

      // remove the line that was already checked
      delete lines[i];
      let subLines = lines.filter(function(el) {
        return el != null;
      });

      // check if the child has any children
      getChildren(child, subLines);
    }
  }
}

Its use:

let csv = `name,parent
Level 2: A,Top Level
Top Level,null
Son of A,Level 2: A
Daughter of A,Level 2: A
Level 2: B,Top Level`;

let lines = csv.split(/\r\n|\n/);

let treeData = convertToJsonTree(lines);

console.log(treeData);

JSFiddle: https://jsfiddle.net/dbheale/Lrhsxw9e/

EDIT:

To read in your CSV from a file:

function loadDiagramFromCsvFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var csv = rawFile.responseText;

                let lines = csv.split(/\r\n|\n/);

                let treeData = convertToJsonTree(lines);

                // Do what you need with your treeData here
                // Maybe create a method that generates the diagram?
                createDiagram(treeData);
            }
        }
    }
    rawFile.send(null);
}