d3 ellipse

draggable and resizable

HTML

<button id='ellipse'>Ellipse</button>

CSS

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

JavaScript

var svg = d3.select('body').append('svg');


new Ellipse()
function Ellipse() {
    var self = this;
    var ellipse, eData = [], isDown = false, isDragging = false, m1, m2, radiusX, radiusY, click = 1;

    svg.on('mousedown', function () {
        m1 = d3.mouse(this);
        if (!isDown && click == 1) {
            if(!isDragging){
                self.eData = [{
                    x1: m1[0],
                    y1: m1[1],
                    x2: m1[0],
                    y2: m1[1],
                    a: 0,
                    b: 0
                }];
                self.ellipseElement = d3.select('svg').append('ellipse').attr('class', 'ellipse').call(dragE);
                self.pointElement1 = d3.select('svg').append('circle').attr('class', 'pointE').call(dragP);
                self.pointElement2 = d3.select('svg').append('circle').attr('class', 'pointE').call(dragP);
                self.pointElement3 = d3.select('svg').append('circle').attr('class', 'pointE').call(dragP);
                self.pointElement4 = d3.select('svg').append('circle').attr('class', 'pointE').call(dragP);
                updateEllipse();
            }            
        } else {
            isDragging = true;   
        }
        isDown = !isDown;
        click++;
    })

    .on('mousemove', function () {
        m2 = d3.mouse(this);
        if (isDown && !isDragging && click == 2) {
            self.eData[0].x2 = m2[0];
            self.eData[0].y2 = m2[1];
            self.eData[0].a = Math.abs(m2[0] - m1[0]);        
            self.eData[0].b = Math.abs(m2[1] - m1[1]);
            updateEllipse();
        }
    });

    function updateEllipse() {
        ellipse = d3.select(self.ellipseElement[0][0]).data(self.eData).style('stroke', 'blue');        
        ellipse.attr('cx', function (d) { return d.x1; })
               .attr('cy', function (d) { return d.y1; })
               .attr('rx', function (d) { return Math.abs(d.a); })
               .attr('ry', function (d) {...