d3 - circle (drag with resize handle)
CSS
svg {
border: solid 1px blue;
}
circle {
fill: lightgreen;
stroke: green;
stroke-width: 2px;
}
.point {
fill: black;
stroke: black;
}
JavaScript
var w = 600, h = 600, circle, point, circleData = [ ], isDown = false, m1, m2, isDrag = false, isResize = false, radius;
var svg = d3.select("body").append('svg').attr('width', w).attr('height', h)
.on('mousedown', mousedown)
.on('mousemove', mousemove);
var dragC = d3.behavior.drag().on('drag', dragCircle);
function dragCircle(dataSource) {
var e = d3.event;
//dataSource.cx += e.dx;
//dataSource.cy += e.dy;
circleData[0].cx += e.dx;
circleData[0].cy += e.dy;
updateCircle();
}
function drawCircle() {
circle = svg.append('circle');
point = svg.append('circle');
}
function updateCircle() {
radius = getRadius(m1[0], m1[1], m2[0], m2[1]);
circle.attr('cx', circleData[0].cx)
.attr('cy', circleData[0].cy)
point.attr('class', 'point').attr('r', 5);
}
var dragP = d3.behavior.drag().on('drag', dragPoint);
function dragPoint() {
console.log('dragPoint', circleData.cx);
var e = d3.event;
point.attr('x', function(d) { return d.cx; })
.attr('y', function(d) { return d.cy; });
updateCircle();
}
function updatePoint() {
point.attr('cx', m2[0])
.attr('cy', m2[1]);
}
function mousedown() {
m1 = d3.mouse(this);
if (!isDown && !circle) {
console.log('if');
drawCircle();
circleData[0] = { cx: m1[0], cy: m1[1] };
updateCircle();
isDrag = false;
} else {
console.log('else');
circle.call(dragC);
d3.selectAll('rect').call(dragP);
isDrag = true;
}
isDown = !isDown;
}
function mousemove() {
m2 = d3.mouse(this);
if(circle && isDown && !isDrag) {
updateCircle();
circle.attr("r", getRadius(m1[0], m1[1], m2[0], m2[1]) );
updatePoint();
}
else {
console.log('else');
circle.call(dragC);
d3.selectAll('rect').call(dragP);
isDrag = true;
}
}
function getRadius(x1, y1, x2, y2) {
return...