test block 1

forked from anonymous's block: test block 1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
     
var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var rectangles = d3.range(5).map(function() {
  return {
    x: Math.round(Math.random() * (width)),
    y: Math.round(Math.random() * (height))
  };
});
    
 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
    
//		var drag_handler = d3.drag()
//    .on("start", drag_start)
//    .on("drag", drag_drag);
              
    
    var defs = svg.append("defs");
    
    var linearGradient = defs.append("linearGradient")
    .attr("id", "linear-gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%");
    
    linearGradient.append("stop") 
    .attr("offset", "0%")   
    .attr("stop-color", "#da75ff");
    
    linearGradient.append("stop") 
    .attr("offset", "100%")   
    .attr("stop-color", "#0d0089");
    
   var group = svg.selectAll('g')
  .data(rectangles)
  .enter().append("g")
  .attr("transform", 
        "translate(" + margin.left + "," + margin.top + ")")
   .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged));

group.append("rect")
     .attr("x", function(d) { return d.x; })
     .attr("y", function(d) { return d.y; })
     .attr("height", 60)
     .attr("width", 120)
     .style("fill", "url(#linear-gradient)")

//    var rectangle = svg.append("rect")
//                            .attr("x", 10)
//                            .attr("y", 10)
//                            .attr("width", 300)
//                            .attr("height", 100)
//    												.style("fill","url(#linear-gradient)")
//    												.call(drag_handler);
    
//    var rectangle2 = svg.append("rect")
//                            .attr("x", 200)
//                           .attr("y", 500)
//                            .attr("width", 300)
//                            .attr("height", 100)
//    												.style("fill","url(#linear-gradient)")
//    												.call(drag_handler);
    
function dragstarted(d) {
  d3.select(this).raise();
}

function dragged(d) {
  d3.select(this).select("rect")
    .attr("x", d.x = d3.event.x)
    .attr("y", d.y = d3.event.y);
}

</script>
</body>

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