score:1

Accepted answer

This is how i solved it @dev_marshell08

<script type="text/javascript">
    var w = 1600,
        h = 2600,
        r = 6,
        fill = d3.scale.category20();
            var root;

    var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([w, h]);

    var svg = d3.select("#visualize").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    d3.json("flare.json", function(json) {
        root = json;
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

        var link = svg.selectAll("line")
                .data(links)
                .enter().append("svg:line")
                .attr("class", "link");

      var node = svg.selectAll("circle")
          .data(nodes)
            .enter().append("svg:circle")
          .attr("r", r - .75)
          .style("fill", function(d) { return fill(d.group); })
          .style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
          .call(force.drag);

      force
          .nodes(nodes)
          .links(links)
          .on("tick", tick)
          .start();

      function tick(e) {

        // Push sources up and targets down to form a weak tree.
        var k = 6 * e.alpha;
        links.forEach(function(d, i) {
          d.source.y -= k;
          d.target.y += k;
        });

        node.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });

        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });
      }
    });

  function flatten(root) {
    var nodes = [], i = 0;

    function recurse(node) {
      if (node.children) node.children.forEach(recurse);
      if (!node.id) node.id = ++i;
      nodes.push(node);
    }

    recurse(root);
    return nodes;
  }
</script>

Related Query

More Query from same tag