How to create stretchable svg shapes - svg

Question

How to create workflow components with stretchable feature of different shapes like in this link http://rigrr.rapilabs.com/
I have implement a sample using d3 such as draggable circle but I don't know how to achieve stretching of shapes
var boxWidth = 600;
var boxHeight = 400;
var box = d3.select('body')
.append('svg')
.attr('class', 'box')
.attr('width', boxWidth)
.attr('height', boxHeight);
var drag = d3.behavior.drag()
.on('dragstart', function() {
circle.style('fill', 'red');
})
.on('drag', function() {
circle.attr('cx', d3.event.x)
.attr('cy', d3.event.y);
})
.on('dragend', function() {
circle.style('fill', 'black');
});
var circle = box.selectAll('.draggableCircle')
.data([{
x: (boxWidth / 2),
y: (boxHeight / 2),
r: 25
}])
.enter()
.append('svg:circle')
.attr('class', 'draggableCircle')
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
})
.attr('r', function(d) {
return d.r;
})
.call(drag)
.style('fill', 'black');
.box {
border: 1px solid black;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

Answer 1

Here is one way to do it - add a group and add the element and a ghost of the element behind the element but with a slightly bigger size. This element can be used for resizing.
I've added this to your circle move code in the below snippet
var boxWidth = 600;
var boxHeight = 400;
var box = d3.select('body')
.append('svg')
.attr('class', 'box')
.attr('width', boxWidth)
.attr('height', boxHeight);
var drag = d3.behavior.drag()
.on('drag', function() {
g.selectAll('*')
.attr('cx', d3.event.x)
.attr('cy', d3.event.y);
})
var resize = d3.behavior.drag()
.on('drag', function() {
g.selectAll('.resizingContainer')
.attr('r', function(c) {
return Math.pow(Math.pow(this.attributes.cx.value - d3.event.x, 2) + Math.pow(this.attributes.cy.value - d3.event.y, 2), 0.5) + 6;
});
g.selectAll('.draggableCircle')
.attr('r', function(c) {
return Math.pow(Math.pow(this.attributes.cx.value - d3.event.x, 2) + Math.pow(this.attributes.cy.value - d3.event.y, 2), 0.5);
});
})
var g = box.selectAll('.draggableGroup')
.data([{
x: (boxWidth / 2),
y: (boxHeight / 2),
r: 25
}])
.enter()
.append('g')
g
.append('svg:circle')
.attr('class', 'resizingContainer')
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
})
.attr('r', function(d) {
return d.r + 6;
})
.style('fill', '#999')
.call(resize);
g
.append('svg:circle')
.attr('class', 'draggableCircle')
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
})
.attr('r', function(d) {
return d.r;
})
.call(drag)
.style('fill', 'black')
.box {
border: 1px solid black;
border-radius: 10px;
}
.resizingContainer {
cursor: nesw-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

Not sure what your idea of "streching" is but you can look at transforms such as scale and skew.
transform="skewX(50)"
transform="skewY(50)"