CODEWITHSUNDEEP
javascriptd3.js
preetha
preetha

Reputation: 23

D3 cluster layout design

i tried to deign a cluster layout in d3.has content in json file..some of the nodes here is a parent node.when i click on the parent node ..it shows the children..i want to close the excisting node ,when i open a new parent node..any idea?

       <!DOCTYPE html>
     <html>

  <head>
    <title>Radial Cluster Demo</title>
    <script src="ddd.js"></script>
    <script src="q.js"></script>
    <style>
      .node circle {
        fill: #fff;
        stroke: black;
        stroke-width: 1.5px;
      }

      text:hover {
        fill: red;
      }

      .node {
        cursor: pointer;
        font: 10px sans-serif;
      }

      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
      }

      div#tooltip {
        color: black;
        background: orange;
        //   opacity:1;
        // padding:5px;
      }
    </style>
  </head>

  <body>
    <div id="tooltip" style="display:none"></div>
    <div id="viz" class="dd"></div>
    <script>
      var width = $(document).width();
      var height = $(document).height();
    </script>

    <script type="text/javascript">
      var radius = 600 / 2;

      var cluster = d3.layout.cluster()
        .size([360, radius - 120])
        // .separation(function (a, b) {
        //  return (a.parent == b.parent ? 1 : 10) / a.depth;
        //});
      var diagonal = d3.svg.diagonal.radial()
        .projection(function(d) {
          return [d.y, d.x / 180 * Math.PI];
        });

      var svg = d3.select("body").append("svg")
        .attr("width", radius * 2)
        .attr("height", radius * 2)
        //  .attr("width", width *2 )
        //  .attr("height", height*4)
        .append("g")
        .attr("transform", "translate(" + radius + "," + radius + ")");
      var data = {
        "name": "அகல்",
        "children": [{
          "name": "விலகு",
          "color": "red"
        }, {
          "name": "நீங்கு",
          "color": "red",
          "l": "red",
          "f": "360",
          "t": "நீங்குதல், பாயிருளகல (புறநா.25).",
          "children": [{
            "name": "விலகு",
            "color": "red"
          }, {
            "name": "பின்னிடு",
            "color": "red"
          }, {
            "name": "ஒதுங்கு",
            "color": "red"
          }, {
            "name": "இடம்விட்டுப் பெயர்",
            "color": "red"
          }, {
            "name": "பிரி",
            "color": "red"
          }, {
            "name": "பின்வாங்கு",
            "color": "red"
          }]
        }, {
          "name": "பிரி",
          "color": "red",
          "t": "பிரிதல். அகன்ற பூங்கொடியை (பாரத.குரு.79)"
        }, {
          "name": "கட",
          "color": "#1E90FF",
          "t": "கடத்தல். (திவா.)"
        }, {
          "name": "விருத்தியடை",
          "color": "green",
          "t": "விருத்தியடைதல் (குறள்,170.)"
        }, {
          "name": "விசாலி",
          "color": "#00C957",
          "t": "விசாலித்தல். (புறநா.3,16.)"
        }, {
          "name": "நீட்டு",
          "color": "#00C957"
        }, {
          "name": "விரி",
          "color": "#00C957"
        }, {
          "name": "பரப்பு",
          "color": "#00C957"
        }, {
          "name": "விரிவு",
          "color": "#00C957"
        }, {
          "name": "விளக்குத் தகழி",
          "color": "#D15FEE",
          "t": "விளக்குத் தகழி. திருவிளக்குத் 
        திரியிட்டங் ககல்பரப்பி (பெரியபு.கலிய.15)."
        }, {
          "name": "சட்டி",
          "color": "orange",
          "l": "red",
          "f": "360",
          "t": "சட்டி. காரகற்கூவியன் (பெரும்பாண். 377)",
          "children": [{
            "name": "மட்பாண்டம்",
            "color": "red"
          }, {
            "name": "உலோகத்தட்டு",
            "color": "red"
          }, {
            "name": "திதி",
            "color": "green"
          }, {
            "name": "அறுபது",
            "color": "orange"
          }, {
            "name": "தாமரை",
            "color": "purple"
          }, {
            "name": "அழித்தல்",
            "color": "brown"
          }, {
            "name": "கொல்லுதல்",
            "color": "brown"
          }]
        }, {
          "name": "ஓர் அளவு",
          "color": "blue",
          "t": "ஓர் அளவு. (தொல்.எழுத்.170,உரை.)"
        }, {
          "name": "வெள்வேல்",
          "color": "maroon",
          "t": "(சங்.அக.)"
        }, {
          "name": "உள்ளூர்",
          "color": "purple",
          "t": "(பொதி. நி.) "
        }, {
          "name": "ஊரின் உட்புறம்",
          "color": "purple",
          "t": "ஊரின் உட்புறம். (பொதி. நி.)"
        }, {
          "name": "நாடு",
          "color": "brown",
          "l": "red",
          "f": "360",
          "t": "நாடு. (பொதி. நி.)",
          "children": [{
            "name": "தேடு",
            "color": "red"
          }, {
            "name": "ஆராய்",
            "color": "red"
          }, {
            "name": "தெரி",
            "color": "red"
          }, {
            "name": "அள",
            "color": "red"
          }, {
            "name": "கிட்டு",
            "color": "red"
          }, {
            "name": "விரும்பு",
            "color": "green"
          }, {
            "name": "நினை",
            "color": "green"
          }, {
            "name": "மோப்பம்பிடி",
            "color": "green"
          }, {
            "name": "தேசம்",
            "color": "purple"
          }, {
            "name": "இடம்",
            "color": "purple"
          }, {
            "name": "பூமி",
            "color": "purple"
          }, {
            "name": "இராச்சியம்",
            "color": "purple"
          }, {
            "name": "நாட்டுப்புறம்",
            "color": "purple"
          }, {
            "name": "உலகம்",
            "color": "purple"
          }, {
            "name": "மருதநிலம்",
            "color": "purple"
          }, {
            "name": "பக்கம்",
            "color": "orange"
          }, {
            "name": "8 பதுமம்",
            "color": "blue"
          }]
        }, {
          "name": "8 பதுமம்",
          "color": "maroon"
        }]
      };
      //var tooltip = d3.select("body").append("div")
      //  .attr("class", "tooltip")
      // .style("opacity", 0)
      //.style("background",'#BCC5F7');
      function update(root) {
        var nodes = cluster.nodes(root);
        svg.selectAll("path.link").remove();
        svg.selectAll("g.node").remove();
        var link = svg.selectAll("path.link")
          .data(cluster.links(nodes))
          .enter().append("path")
          .attr("class", "link")
          .attr("d", diagonal)
          .style("stroke-width", "0.7px")
          .style("fill", function(d) {
            return d.color;
          })
          .style("stroke", function(d) {
            return d.target.color;
          });

        var node = svg.selectAll("g.node")
          .data(nodes)
          .enter().append("g")
          .attr("class", "node")
          //    .attr("transform",
         "translate(" + radius / 2 + "," + radius / 2 + ")")
          .attr("transform", function(d) {
            return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
          })

        node.append("circle")
          .style("stroke", function(d) {
            return d.color;
          })
          .style("fill", "none")
          .attr("r", 4.5).style("fill", function(d) {
            return d._children ? "red" : "#fff";
          }).on("click", click);

        node.append("text")
          .attr("class", "text")
          .style("stroke", "0.4px")
          .on("mouseover", function(d) {
            var r = // d3.select(this).node();
              d3.select("div#tooltip")
              .style("display", "inline")
              //    .style("top", (r.top-25) + "px")
              //  .style("top", 100 + "px")
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY - 80) + "px")
              //  .style("left", r.left + "px")
              // .style("left",  + "px")
              .style("position", "absolute")

            .text(d.t);
          })
          .on("mouseout", function() {
            d3.select("div#tooltip").style("display", "none")
          })

        .attr("dy", ".32em") //.style("fill", function(d) { return d.l; })

        .attr("text-anchor", function(d) {
            return d.x < 180 ? "start" : "end";
          })
          .attr("transform", function(d) {
            return d.x < 180 ?
        "translate(8)" : "rotate(180)translate(-10)"; //270 10

          })

        .text(function(d) {
          return d.name

        });


      }
      update(data);

      function sortTree() {
        tree.sort(function(a, b) {
          return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
        });
      }

      // Sort the tree initially incase the JSON isn't in a sorted order.
      sortTree();

      function collapse(d) {
        if (d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }

      data.children.forEach(collapse);
      update(data);


      function click(d) {
        if (!d.parent) {
          return;
        }

        if (!d.children)
          data.children.forEach(collapse);
        if (d.children) {
          d._children = d.children;
          d.children = null;
        } else {
          d.children = d._children;
          d._children = null;

        }
        //  d3.select(self.frameElement).style("height", width);    
        update(data);
        if (d.parent) {
          //d3.selectAll("link").style("length",500);
          //d3.select("text") .style("fill", function(d) 
        { return d.l; })//.attr('transform', 'rotate(270)');
          //.attr("transform", function (d) {
          //  return d.x < 180 ? 
     "translate(8)" : "rotate(180)translate(-10)";   
          //  })



          return;
        }
      }
    </script>
  </body>

    </html>

Upvotes: 1

Views: 488

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

In your click function you need to collapse all nodes, if the clicked is opened.

Then open up the node you clicked like below:

function click(d) {
  //this collapse all the open nodes, if the clicked node is opened
  if(!d.children)
    data.children.forEach(collapse);
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(data);
}

working code here

Upvotes: 1

Related Questions