Drag Group Test v4 by d3noob

This is an example set up to test the use of the d3.drag component.

The intention is to learn enough about d3.drag to integrate it into a sankey diagram for v4 similar to this example.

The start point was Mikes circle dragging examlpe [here] which I tried to integrate with the object+text drag implimentation here.

Tragically I can’t quite work out how to grab the ‘g’ element and will therefore use this block as an example for a question on Stack Overflow.

EDIT: Spoiler Alert: Solved by Dragon_Slayer. Solution bl.ock here.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.active {
  stroke: #000;
  stroke-width: 2px;
}

.rect {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

</style>

<body>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var rectangles = d3.range(20).map(function() {
  return {
    x: Math.round(Math.random() * (width)),
    y: Math.round(Math.random() * (height))
  };
});

var color = d3.scaleOrdinal(d3.schemeCategory20);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var group = svg.append("g")
  .data(rectangles)
  .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")")
      .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

group.selectAll("rect")
  .data(rectangles)
  .enter().append("rect")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("height", 60)
    .attr("width", 30)
    .style("fill", function(d, i) { return color(i); });

group.selectAll("text")
  .data(rectangles)
  .enter().append("text")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
      .attr("text-anchor", "start")
      .style("fill", "steelblue")
      .text("Close");

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

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

function dragended(d) {
  d3.select(this).classed("active", false);
}

</script>
</body>