D3js collapsible tree throwing bad request

问题

I am using the d3js collapsible tree grid to display the nodes and when I run the code in plunker I am getting a weird 400 bad request error.

I have replaced the code which fetches the json and hard coded the json directly like below:

var treeData ={"user_id":0,"name":"Root Node","children":[{"user_id":0,"name":"Flossie Hickman","children":[....]}]};

    // Calculate total nodes, max label length
    var totalNodes = 0;
    var maxLabelLength = 0;
    // variables for drag/drop
    var selectedNode = null;
    var draggingNode = null;
    // panning variables
    var panSpeed = 200;
    var panBoundary = 20; // Within 20px from edges will pan when dragging.
    // Misc. variables
    var i = 0;
    var duration = 750;
    var root;

Link to Plunker

Can you please let me know where I am going wrong.

回答1:

Your code doesn't show any error in the console, here is an image to proof:

Still, nothing will show up. The reason is simple: you are calling your script...

<script src="dndTree.js"></script>

...before the <body>, where you have this div:

<div id="tree-container"></div>

Which is the div used to create the svg:

var baseSvg = d3.select("#tree-container").append("svg")

So, this is the correct order:

<body>
    <div id="tree-container"></div>
    <script src="dndTree.js"></script>
</body>

As a good practice, reference your script at the bottom of the body.

Here is the working plunker (and I emphasise "working"): http://plnkr.co/edit/2aLPBuEXN9f6Tlwekdg5?p=preview

来源：https://stackoverflow.com/questions/39485993/d3js-collapsible-tree-throwing-bad-request

标签

javascript

jquery

d3.js