D3 Examples - Parent Child TreeMap of Specific Id

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
​
    <title>Collapsible Tree Example</title>
​
    <style>
​
      .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 3px;
      }
​
      .node text { font: 12px sans-serif; }
​
      .node--internal text {
        text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
      }
​
      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 2px;
      }
    
    </style>
​
  </head>
​
  <body>
    <input type="text" id="myId" placeholder="Add mouseId&hellip;">
    <input name="button"  type="submit" value="View Hierarchy" onclick="search()">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      
      function findFamily(data, id) {
        console.log("id: " + id);
        var mates = [];
        console.log(data[0].motherId);
        var gender = findGender(data, id);
        if(gender == "M") {
            mates = data.filter(function(d, i) { return d.fatherId == id });
        }
        else {
          mates = data.filter(function(d, i) { return d.motherId == id });
        }
        var matesId = [];
        Object.keys(mates).forEach(function(key){
          if(matesId.indexOf(mates[key].motherId) < 0) {
            matesId.push(mates[key].motherId);
          }
        });
        return matesId;
      }
      
      function findGender(data, id) {
        return data.filter(function(d) { return d.mouseId == id })[0].gender;
      }
                
      
      function findChildren(data, gender, id, mate) {
        var childrenId = [];
        var children = [];
        
        if(gender == "M") {
          console.log("male")
            children = data.filter(function(d, i) { return d.fatherId == id && d.motherId == mate});
        }
        else {
          children = data.filter(function(d, i) { return d.motherId == id && d.fatherId == mate})
        }
        Object.keys(children).forEach(function(key){
            childrenId.push(children[key].mouseId);
        });
        
        return childrenId;
      }
​
      function f1(data, id) {
          var data1 = [];
          var list = [];
          list.push(id);
          while(list.length > 0) {
            Object.keys(data).forEach(function(key){
              if(data[key]["child"] == list[0]) {
                list.push(data[key]["name"])
                data1.push(data[key])
              }
            });
            list.shift();
          }
            data1.push( {"name": id, "child": "null"})
          return data1;
        }
​
       var margin = {top: 240, right: 20, bottom: 20, left: 120},
        width = 960 - margin.right - margin.left,
        height = 500 - margin.top - margin.bottom;
​
      var i = 0;
​
      var tree = d3.layout.tree()
        .size([height, width]);
​
      var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.x, d.y]; });
​
      var svg = d3.select("body").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
      
            var id ;
      
      
            function search() {
          id = document.getElementById("myId").value;
​
      d3.json("result2_parent_child.json", function(data) {
        
                result =  f1(data, id);         
        var dataMap = result.reduce(function(map, node) {
            map[node.name] = node;
          return map;
        }, {});
        
                svg.selectAll("*").remove();
        var treeData = [];
        result.forEach(function(node) {
          // add to parent
          var child = dataMap[node.child];
          if (child) {
            // create child array if it doesn't exist
            (child.children || (child.children = []))
              // add node to child array
              .push(node);
          } else {
            // parent is null or missing
            treeData.push(node);
          }
        });
        root = treeData[0];
        update(root);
        findFamily1(id);
      });
      }
      
      function findFamily1(id) {
        d3.csv("colony2_updated.csv", function(data) {
          var matesId = findFamily(data, id);
          console.log("mates are: " + matesId);
             
          
          var ellipse = svg.selectAll("ellipse")
                          .data(matesId)
                                        .enter()
                                        .append("ellipse")
                          .attr("cx", 50)
                          .attr("cy", function(d, i) {return(i+1) * 80;})
                          .attr("rx", 10)
                          .attr("ry", 10)
                          .text(function(d) {
                            console.log("value: " + d);
                            return d.value})
          
          var text = svg.selectAll("text")
                        .data(matesId)
                        .enter()
                        .append("text");
          
          var textLabels = text
                 .attr("x", function(d) { return 10; })
                 .attr("y", function(d) { return 100; })
                 .text( function (d) { return "hello"; })
​
          var gender = findGender(data, id);
          var i = 0;
          matesId.forEach(function(mate){
          
            var children = findChildren(data,gender,id,mate);
            svg.append("text")
          .attr("x", 80)
          .attr("y", function(d) {return(i+1) * 85;})
          .text(function(d) {return "Children: " +  children;})
            console.log("children of " + id + " and " + mate + " are: " + children);
            i = i + 1;
          });
        });
      }
      
      function update(source) {
​
        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
          links = tree.links(nodes);
//         console.log(nodes);
​
        // Normalize for fixed-depth.
        nodes.forEach(function(d) { d.y = -d.depth * 80; });
​
        // Declare the nodes…
        var node = svg.selectAll("g.node")
          .data(nodes, function(d) { return d.id || (d.id = ++i); });
​
        // Enter the nodes.
        var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { 
            return "translate(" + d.x + "," + d.y + ")"; });
​
        nodeEnter.append("circle")
          .attr("r", 10)
          .style("fill", "#fff");
​
        nodeEnter.append("text")
          .attr("x", function(d) { 
            return d.children || d._children ? -18 : 18; })
          .attr("dy", ".35em")
          .attr("text-anchor", function(d) { 
            return d.children || d._children ? "end" : "start"; })
          .text(function(d) { return d.name; })
          .style("fill-opacity", 1);
​
        // Declare the links…
        var link = svg.selectAll("path.link")
          .data(links, function(d) { return d.target.id; });
​
        // Enter the links.
        link.enter().insert("path", "g")
          .attr("class", "link")
          .attr("d", diagonal);
      }
    </script>
    
  </body>
</html>
​
    