D3 Examples - 03: grouped translation

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    /* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    
    .entity{
      fill: lightblue;
      rx: 10px;
      
    }
    
  </style>
</head>
​
<body>
    <div id="chart"></div>
  
  
      <script>
                
        //create svg canvas
        var svg = d3.select("#chart")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);
        
​
                var data_set = 
            { entities : [
          {id :'sr' , label: 'Sunrise', x: 100, y:100, 
           states: [{id:'srs01', label:'Dormant', initial_count: 10000, x_offset: 75, y_offset:100},
                   {id:'srs02', label:'Active', initial_count: 50000, x_offset:200, y_offset:100}]},
          {id :'002' , label: 'Sunset', x: 400, y:600, initial_count: 10000,
          states:[{id: 'ss01', label:'Active', initial_count: 8000, x_offset:50, y_offset:100},
                 {id: 'ss01', label:'Dormant', initial_count: 80000, x_offset:200, y_offset:100}]},
          {id: 'sal01', label:'SeaWater', x:600, y:100, 
          states: [{id:'sa01', label:'Active', initial_count: 50000, x_offset:100, y_offset:100},
                   {id:'sa02', label:'Dormant', initial_count: 20000, x_offset:200, y_offset:100}]}
        ]
             
       };
        
       var entityGroup = svg.selectAll('g')
       .data(data_set.entities)
       .enter()
       .append("g")
       .classed("entityGroup", true)
       .attr('transform', translate)
             .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
        
        //Add entity boxes
                var entities = entityGroup
       .append("rect")
       //.attr("x", function(d){return d.x;})
       //.attr("y", function(d){return d.y;})
       .classed('entity', true) 
       .attr("width", 300)
       .attr("height", 200)
       .attr('rx', 10)
       .attr('ry', 10);
        
        entityGroup
        .append("text")
        .attr("x", 10)
        .attr("y", 20)
        .text(function(d){return d.label;});
        
        
        //Add circles representing states
        var states = entityGroup
        .selectAll("circle")
        .data(function(d){return d.states;})
        .enter()
        .append("circle")
        .attr("cx", function(d){return d.x_offset})
        .attr("cy", function(d){return d.y_offset})
        .attr("r", function(d){return d.initial_count / 1000})
        .style("fill", "grey")
        
       /*
       Functions:
       */
        
        
        //Function to translate group data based on x.y data
        function translate(d){
          return 'translate(' + d.x + ',' + d.y +')';
        }
        
        
       function dragstarted(d) {
             
           if (d.x1){
             d.x1 =  d3.event.x - d.xt;
             d.y1 =  d3.event.y - d.yt;
           }else{
             d.x1 = d3.event.x;
             d.y1 = d3.event.y;
           }
                        d3.select(this).raise().classed("active", true);
        }
​
        function dragged(d) {
          d3.select(this).attr("transform", "translate(" + (d3.event.x - d.x1) + "," + (d3.event.y - d.y1) + ")");
          d.xt = d3.event.x - d.x1;
          d.yt = d3.event.y - d.y1;
          
        }
​
        function dragended(d) {
          d3.select(this).classed("active", false);
                } 
​
        
        
        var drag_this = d3.drag().subject(this)
          .on('start',function (d) {
              if (d.x1){
                  d.x1 =  d3.event.x - d.xt;
                  d.y1 =  d3.event.y - d.yt;
              }else{
                  d.x1 = d3.event.x;
                  d.y1 = d3.event.y;
              }
          })
        .on('drag',function(d){
            d3.select(this)
            .attr("transform", "translate(" + (d3.event.x - d.x1)  + "," + (d3.event.y - d.y1) + ")");
​
            d.xt = d3.event.x - d.x1;
            d.yt = d3.event.y - d.y1;
        });
​
​
        
    </script>
</body>
​
    