<meta charset="utf-8">
<style>

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

</style>
<svg width="100%" height="100%"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v0.3.js"></script>

<script type="text/javascript">

var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        radius = 32;

var symbol = d3.symbol().type(d3.symbolTriangle)
  .size(function(d){
    return Math.random() * 10000;
  });

var data = d3.range(20).map(function(){ return Math.random() * 200; })
                       .map(function(d, i){
                                return {
                                  x: i * 50,
                                  y: d * 4
                                };
                              })

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

var path = svg
  .selectAll('path')
  .data(data)
  .enter()
    .append('path')
    .attr('d', symbol)
    .attr('stroke', 'black')
    .attr('fill',function(d, i) { return color(i); })
    .attr('transform', function(d){ return 'translate(' + d.x +','+ d.y +')'; })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
    .on("dblclick",removeAndAdd);

function removeAndAdd(){
  //d3.select(this).remove();

svg.attr('transform', function(d){
   console.log(this.y);
   var x = d.x + Math.random()*100;
   var y = d.y + Math.random()*100;

   return 'translate(' + x +','+ y +')'; })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
      .on("dblclick",removeAndAdd);

}

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

function dragged(d) {
    d3.select(this).attr('transform', function(d){ return 'translate(' + d3.event.x +','+ d3.event.y +')'; });
}

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

</script>