d3 ellipse

draggable and resizable

by dirtyd77

HTML

<svg id="svg" height="200" width="200"></svg>

CSS

svg {
    border: solid 1px;
    height: 500px;
    width: 600px;
}
ellipse {
    stroke: mediumvioletred;
    stroke-width: 2px;
    fill: palevioletred;
}

JavaScript

var isDown = false,
    isDragging = false,
    ellipseDrag = d3.behavior.drag()
.on('dragstart', dragStart)
.on('drag', eDrag)
.on('dragend', dragEnd),
    pointDrag = d3.behavior.drag()
.on('dragstart', dragStart)
.on('drag', ptDrag)
.on('dragend', dragEnd),
    point = [{
        x1: 50,
        y1: 60,
        x2: 0,
        y2: 0,
        r: 0
    }],
    handles = [
        { x: 0, y: 0 },
        { x: 0, y: 0 },
        { x: 0, y: 0 },
        { x: 0, y: 0 }
    ];
    

var svg = d3.select('#svg');

 var ellipse = svg.selectAll('.ellipse').data(point);
    
         ellipse.enter()
              .append('ellipse')
              .classed('ellipse', true)
              .call(ellipseDrag);
var handleEls = svg.selectAll('.handle').data(handles);

handleEls
.enter()
.append('circle')
.classed('handle', true)
.call(pointDrag);

svg.on('mousedown', function (){
 var m = d3.mouse(this);
   
       
   ellipse.attr({
            cx: function (d){
                d.x1 = m[0];
                return d.x1;
            },
            cy: function (d){
                d.y1 = m[1];
                return d.y1;        
            },
            rx: function (d){
                return d.x2;
            },
            ry: function (d){
                return d.y2;
            }
        });
    
    
    handleEls.attr({
        cx: function (d){
            d.x = m[0];
            return d.x;
        },
        cy: function (d){
            d.y = m[1];
            return d.y;        
        },
        r: 5
    });
    
    
      
})
    .on('mousemove', function () {
        if(isDown){
            ellipse.attr({
                cx: function (d){
                    d.x1 = m[0];
                    return d.x1;
                },
                cy: function (d){
                    d.y1 = m[1];
                    return d.y1;        
                },
                rx: function (d){
                    return d.x2;
                },
                ry: function...