D3 Examples - Icicle & Force Layout

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
rect {
  stroke: #fff;
}
​
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
​
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer
}
​
body{
    font-family: Sans-Serif
}
​
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
// var path = ['home'];
// var width = 600,
//     height = 500;
​
// var x = d3.scale.linear()
//     .range([0, width]);
​
// var y = d3.scale.linear()
//     .range([0, height]);
​
// var color = d3.scale.category20c();
// var colors = {"home":"red", "card":"green", "mortgage":"orange", "car":"purple"};
​
// var partition = d3.layout.partition()
//     .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
//     .value(function(d) { return d.value; });
​
// var svg = d3.select("body").append("svg")
//     .attr("width", width)
//     .attr("height", height);
​
// var rect = svg.selectAll("rect");
​
// d3.json("icicles.json", function(error, root) {
//   if (error) throw error;
​
// //Add Partition on the left
// //   rect = rect
// //       .data(partition(d3.entries(root)[0]))
// //     .enter().append("rect")
// //   .attr("id", function(d){return "rect_" + d.key})
// //   .attr("class", function(d){return d.key})
// //       .attr("x", function(d) { return x(d.x); })
// //       .attr("y", function(d) { return y(d.y); })
// //       .attr("width", function(d) { return x(d.dx); })
// //       .attr("height", function(d) { return y(d.dy); })
// //       .attr("fill", function(d) { if(d.key == 'end'){
// //                                           return 'white'
// //                                       }
// //                                   else{
// //                                       if(d.key.indexOf('_')>=0){
// //                                           return color(d.key.substr(0, d.key.indexOf('_'))) 
// //                                       }
// //                                       else{
// //                                           return color(d.key) 
// //                                       }
// //                                       }
// //                               })
// //       .on("click", clicked)
//       //.on("click", getAncestors);
​
      
      
// //TOOL TIP____________________________________________________________________ -->
// // var tooltip=d3.select("body").append("div")
// // .style("position","absolute")
// // .style("padding","0px")
// // .style("opacity","0")
// // .style("background", "white")
// // .style("border", "2px;")
// // .style("text-align","center")
// // .style("vertical-align","middle")
// // .style("padding","10px")
// // .attr("id", "tooltip");
​
      
      
      
      
//  rect
//  .on("mousemove", function(d){
//          tooltip
//          .html( function(){
//                      if(d.parent){
//                          return "<strong>" + d.key + "</strong>"+"<br/>"+ Math.round( d.value/d.parent.value*100 * 10 ) / 10 + "% of previous page"}
//                  else{
//                      return "<strong>" + d.key + "</strong>"
//                  }
//                  })
//          .style("opacity", 1)
//                  //.style("left", function(){
//                                      //return(x(d.x) + x(d.dx)/2 + 30)  + "px"
//                                  //})
//                  //.style("top",  function(){
//                                      //return(y(d.y) + y(d.dy)/4) + "px"
//                                      //})
//                  .style("left", function(){
//                                      return(d3.event.pageX+30)+"px"
//                                  })
//                  .style("top", (d3.event.pageY-20)+"px")
//  })
//  .on("mouseout", function(){
//      tooltip
//          .style("opacity", 0)
//          .style("left", "-100px")
//          .style("top", "-100px")
    
//  })  
      
    
​
      
// });
// var num = 0;
​
​
// function allDescendants (node) {
//  path.unshift(node.key);
//  if(node.children){
//      for (var i = 0; i < node.children.length; i++) {
//        var child = node.children[i];
//        path.unshift(child.key);
//        allDescendants(child);
          
//      }
//  }
// }
​
// function clicked(d) {
//  if(d.key != 'end'){
//    x.domain([d.x, d.x + d.dx]);
//    y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);
​
//    rect.transition()
//        .duration(750)
//        .attr("x", function(d) { return x(d.x); })
//        .attr("y", function(d) { return y(d.y); })
//        .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
//        .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
           
//    var current = d;
//    path = [];
      
//    allDescendants(current);
      
//    //console.log(path);
      
//    hide_nodes();
//   }
// }
​
​
​
​
    
​
​
​
​
</script>
​
<svg stroke = "black" id ="nodes" width="800" height="800"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var link;
var node;
var svg = d3.select("#nodes"),
    width2 = +svg.attr("width"),
    height2 = +svg.attr("height");
var radius = 7
​
var color = d3.scaleOrdinal(d3.schemeCategory20);
​
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width2 / 2, height2 / 2));
​
d3.json("nodes.json", function(error, graph) {
  if (error) throw error;
​
  link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("id", function(d){return d.source})
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
​
  node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("id", function(d){return d.id})
      .attr("r", radius)
      //.attr("fill", function(d) { return color(d.group); })
      .attr("fill", function(d) { 
                                if(d.id.indexOf('_')>=0){
                                    return color(d.id.substr(0, d.id.indexOf('_'))) 
                                }
                                else{
                                    return color(d.id) 
                                }
                                })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
          .on("click", node_clicked);
​
  node.append("title")
      .text(function(d) { return d.id; });
​
  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);
​
  simulation.force("link")
      .links(graph.links);
​
  function ticked() {
    node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width2 - radius, d.x)); })
        .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height2 - radius, 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; });
  }
  
  node
    .on("mousemove", function(d){
            node.attr("stroke", "black")
    })
    .on("mouseout", function(){
        node.attr("stroke", "white")
    
    })
  
  
});
​
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}
​
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
​
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
​
function hide_nodes(){
  // Fade all the segments.
  node.style("opacity", 0.1);
  link.style("opacity", 0.1);
​
  // Then highlight only those that are an ancestor of the current segment.
  node.filter(function(d) {
                return (path.indexOf(d.id) >= 0);
              })
      .style("opacity", 1);
      node.filter(function(d) {
                return (path.indexOf(d.id) >= 0);
              })
      .style("opacity", 1);
  link.filter(function(d) {
                return (path.indexOf(d.id) >= 0);
              })
      .style("opacity", 1);
      link.filter(function(d) {
                return (path.indexOf(d.source.id) >= 0);
              })
      .style("opacity", 1);
}
​
​
function node_clicked(d) {
    clicked(d3.select('#rect_'+d.id).data()[0]);
}
​
​
​
​
</script>
    