Tree in D3 creation issue

[ashishsme14]

0

Tree Layout in D3.js

We need to create simple tree in D3, using basic tree data. Now with respect to it we written code as below which throwing error, now sure where we went wrong -

  function getTree() {
  var data=[{
     "name":"A",
     "children":[
        {
           "name":"B",
           "children":[
              {
                 "name":"C"
              },
              {
                 "name":"E"
              }
           ]
        },
        {
           "name":"P",
           "children":[
              {
                 "name":"Q"
              },
              {
                 "name":"R"
              }
           ]
        }
     ]
  }];

    var that = {};
    that.render = function() {

    var canvas = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height", 500)
                                .append("g")
                                    .attr("transforn", "translate(50, 50)");

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

        d3.json(function (data) {

            var nodes = tree.nodes(data);
            var links = tree.links(nodes);

            var node = canvas.selectAll(".node")
                  .data(nodes)
                  .enter()
                  .append("g")
                       .attr("class", "node")
                       .attr("transform", function (d)  { return "translate(" + d.y + "," + d.x + ")"; })

            node.append("circle")
                .attr("r", 5)
                .attr("fill", "steelblue");

            node.append("text")
                 .text(function (d) {return d.name; })

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

            canvas.selectAll(".link")
                 .data(links)
                 .enter()
                 .append("path")
                 .attr("class","link")
                 .attr("fill","none")
                 .attr("stroke", "black")
                 .attr("d",diagonal);

            })
    };
    return that;
}

var c = getTree();
c.render();

We getting error as -

[1A[2KNode.js (linux; U; rv:v8.15.1) D3 JS: Unit Testing: tree should have the correct width FAILED

Expected 0 to be 6.

[ashishsme14]

We suspect issue is when i.e. if we do console.log(links) then in it child depth is 0, which we need to make 6.. look like... hence we need how we can make it 6 and try whether it works or not.

[ashishsme14]

> <?xml version="1.0"?>
> <testsuite name="Node.js (linux; U; rv:v8.15.1)" package="unit" timestamp="2020-10-05T13:01:00" id="0" hostname="workspace2hp6h8wxlcts9e4b.ws-664cbfbc5f-4wwcq" tests="5" errors="0" failures="1" time="0.037">
>   <properties>
>     <property name="browser.fullName" value="Node.js (linux; U; rv:v8.15.1)"/>
>   </properties>
>   <testcase name="D3 JS: Unit Testing: svg should be created" time="0.012" classname="unit.D3 JS:"/>
>   <testcase name="D3 JS: Unit Testing: svg should have the correct height" time="0.009" classname="unit.D3 JS:"/>
>   <testcase name="D3 JS: Unit Testing: svg should have the correct width" time="0.005" classname="unit.D3 JS:"/>
>   <testcase name="D3 JS: Unit Testing: tree to be defined " time="0.004" classname="unit.D3 JS:"/>
>   <testcase name="D3 JS: Unit Testing: tree should have the correct width" time="0.007" classname="unit.D3 JS:">
>     <failure type="">Expected 0 to be 6.
>     at UserContext.&lt;anonymous&gt; (test/index_test.js:31:48)
> </failure>
>   </testcase>
>   <system-out>
>     <![CDATA[
> ]]>
>   </system-out>
>   <system-err/>
> </testsuite>