index.html
<!DOCTYPE html>
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>puntos</title>
</head>
<body>
<button id="up" type="button">Up</button>
<button id="down" type="button">Down</button>
<button id="left" type="button">Left</button>
<button id="right" type="button">Right</button>
<br>
<button id="clear" type="button">Clear</button>
<br>
<button id="red" type="button">red</button>
<button id="green" type="button">green</button>
<button id="blue" type="button">blue</button>
<button id="black" type="button">black</button>
<br>
radio: 5 <input id="radio" type="range" name="radio" min="5" max="25"> 25<br>
<script>
var puntos = [], width = 400, height = 400;
var MouseDown;
var MouseUp;
var MouseXY;
d3.select("svg")
.on("click", function() {
console.log("click");
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.on("click", click)
.on("mousedown", md)
.on("mouseup", mu)
.on("mousemove", mm)
.attr("style", "background-color: rgb(220,220,220);");
function draw() {
svg.selectAll("circle")
.data(puntos)
.enter()
.append("circle")
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; })
.attr("r", radio.value);
}
function click() {
puntos.push(d3.mouse(this));
draw();
}
function md() {
MouseDown = d3.mouse(this);
}
function mu() {
MouseUp = d3.mouse(this);
}
function mm() {
MouseXY = d3.mouse(this);
}
d3.select('#up').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cy", 10 );
});
d3.select('#down').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cy", height-10 );
});
d3.select('#left').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cx", 10 );
});
d3.select('#right').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("cx", width-10 );
});
d3.select('#clear').on('click', function() {
puntos = [];
svg.selectAll("circle")
.data(puntos)
.exit()
.transition().delay(function(d, i) { return i * 50; })
.remove();
});
d3.select('#red').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "red");
});
d3.select('#green').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "green");
});
d3.select('#blue').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "blue");
});
d3.select('#black').on('click', function() {
svg.selectAll("circle").transition().delay(function(d, i) { return i * 50; }).attr("fill", "black");
});
d3.select('#radio').on('change', function() {
svg.selectAll("circle").attr("r", radio.value);
});
</script>
</body>
</html>