Anyone had any success with Json upload through d3?

[P31N]

Through this example you can see it makes a call for the CSV file which then parses it using the d3.csvParse etc.

Whilst that works, I am unable to make it work with a Json file. I tried quite a few things for what ever reason I cant get it to work properly - View code below which is the on that is giving me difficulty. Its a slightly modified version of essentially this example : https://vasturiano.github.io/3d-force-graph/example/tree/ https://github.com/vasturiano/3d-force-graph/blob/master/example/tree/index.html

If anyone can tell me where I'm going wrong, id much appreciate it.

First I tried

// Decrease repel intensity
graph.d3Force('charge').strength(-15);

fetch('./10k.json')
  .then(r => r.text())
  .then(d3.json)
  .then(data => {
    const nodes = [], links = [];
    data.forEach(({ id, source }) => {
      const levels = path.split(','),
        level = levels.length - 1,
        module = level > 0 ? levels[1] : null,
        leaf = levels.pop(),
        parent = levels.join(',');

      const node = {
        path,
        leaf,
        module,
        size: +size || 20,
        level
      };

      nodes.push(node);

      if (parent) {
        links.push({source: parent, target: path, targetNode: node});
      }
    });

    graph(document.getElementById('graph'))
      .graphData({ nodes, links });
  });

Then I tried to use the example of json like here

https://github.com/vasturiano/3d-force-graph/blob/master/example/large-graph/index.html

Now it stops at the setting of the const. value

    // Decrease repel intensity
Graph.d3Force('charge').strength(-15);
const json1 = d3.json('./10k.json');
  fetch(json1)    
  .then(r => r.text())
  .then(d3.json)
  .then(data => {
    const nodes = [], links = [];
    data.forEach(({ id, source }) => {
      const levels = path.split(','),
        level = levels.length - 1,
        module = level > 0 ? levels[1] : null,
        leaf = levels.pop(),
        parent = levels.join(',');

      const node = {
        path,
        leaf,
        module,
        size: +size || 20,
        level
      };

      nodes.push(node);

      if (parent) {
        links.push({source: parent, target: path, targetNode: node});
      }
    });

    graph(document.getElementById('graph'))
      .graphData({ nodes, links });
  });

if anyone could help me understand where I went wrong, would be greatly appreciated.

[P31N]

Quick update - tried more things

The issue at this stage is that the line which states data.forEach is not accepted as json.parse is not defined prior, unclear where it would need to go as then (d3.json.parse() or d3.json.parse isn't taken...

// Decrease repel intensity
Graph.d3Force('charge').strength(-15);
  fetch('./10k.json')    
  .then(r => r.text())
  .then(d3.json)
  .then(data => {
    const nodes = [], links = [];
    data.forEach(({ id, source }) => {
      const levels = path.split(','),
        level = levels.length - 1,
        module = level > 0 ? levels[1] : null,
        leaf = levels.pop(),
        parent = levels.join(',');
      const node = {
        path,
        leaf,
        module,
        size: +size || 20,
        level
      };
      nodes.push(node);
      if (parent) {
        links.push({source: parent, target: path, targetNode: node});
      }
    });
    graph(document.getElementById('graph'))
      .graphData({ nodes, links });
  });
</script>
</body>