Old school D3 from simpler times

All examples By author By category About

Wave1art

Full window Github gist

02: positioning test

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: 01: initial workings

<!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: 150, y:150},
                   {id:'srs02', label:'Active', initial_count: 50000, x:300, y:150}]},
          {id :'002' , label: 'Sunset', x: 400, y:600, initial_count: 10000,
          states:[{id: 'ss01', label:'Active', initial_count: 8000, x_offset:50, y_offset:50},
                 {id: 'ss01', label:'Dormant', initial_count: 8000, x_offset:200, y_offset:50}]},
          {id: 'sal01', label:'SeaWater', x:600, y:100, 
          states: [{id:'sa01', label:'Active', initial_count: 50000, x:650, y:150},
                   {id:'sa02', label:'Dormant', initial_count: 20000, x:800, y:150}]}
        ]
             
       };
        
       var group = svg.selectAll('g')
       .data(data_set.entities)
       .enter()
       .append("g")
       .classed("mygroup", true)
			 .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
        
        //Add entity boxes
				var entities = group
       .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);
        
        group
        .append("text")
        .attr("x", function(d){return d.x + 10;})
         .attr("y", function(d){return d.y + 20;})
         .text(function(d){return d.label;});
        
        
        //Add circles representing states
        var states = group
       	.selectAll("circle")
        .data(function(d){return d.states;})
        .enter()
        .append("circle")
        .attr("cx", function(d){return d.x + 30;})
        .attr("cy", function(d){return d.y + 40;})
        .attr("r", function(d){return d.initial_count / 1000})
        .style("fill", "grey")
        
       
        
       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