Old school D3 from simpler times

All examples By author By category About

Wave1art

Full window Github gist

03: grouped translation

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: 01: initial workings

forked from Wave1art's block: 02: positioning test

<!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>

https://d3js.org/d3.v4.min.js