Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First, lets look at what <code>d3.json</code> does.</p> <pre><code>d3.json("/assets/flare.json", function(root) { // code that uses the object 'root' }); </code></pre> <p>This loads the file <code>/assets/flare.json</code> from the server, interprets the contents as JSON and passes the resulting object as the <code>root</code> argument to the anonymous function.</p> <p>Where you already have a JSON object, you don't need to use the <code>d3.json</code> function - you can just use the object directly.</p> <pre><code>var root = { "name": "flare", "children": [ ... ] }; // code that uses the object 'root' </code></pre> <p>If the object is represented as a string, then you can use <code>JSON.parse</code> to get the object:</p> <pre><code>var myString = '{"name": "flare","children": [ ... ] }'; var root = JSON.parse(mystring); // code that uses the object 'root' </code></pre> <p>Second, lets look at what <code>d3.layout.cluster</code> expects of your data. As per <a href="https://github.com/mbostock/d3/wiki/Cluster-Layout">the docs</a>: </p> <blockquote> <p>... the default children accessor assumes each input data is an object with a children array ...</p> </blockquote> <p>In other words, you data needs to be of the form:</p> <pre><code>var mystring = '{ "name": "Product", "children": [ { "name": "id", "type": "number", "description": "Product identifier", "required": true }, ... { "name": "stock", "type": "object", "children": [ { "name: "warehouse", "type": "number" }, { "name": "retail", "type": "number" } ] } ] } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload