puntos by aaizemberg

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="remove" type="button">remove</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 src="puntos.js"></script>

</body>
</html>

puntos.js

var puntos = [], width = 600, height = 400, MouseDown, MouseUp, 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() {
  // console.log(d3.mouse(this));
  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 Math.log(i+1)*100; })
     .attr("cy", 10 );
});

d3.select('#down').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cy", height-10 );
});

d3.select('#left').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cx", 10 );
});

d3.select('#right').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("cx", width-10 );
});

// antes eliminaba a todos los puntos
// ahora los voy sacando de a uno

/*
d3.select('#remove').on('click', function() {
  puntos = [];
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .remove();      
});
*/

function removeOnePoint() {
  puntos.pop();
  svg.selectAll("circle")
     .data(puntos)
     .exit()
     .remove();
}

d3.select('#remove').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("r", 0)
     .each("end", removeOnePoint); // llamo a removeOnePoint cada vez que termina la transición
                                   // http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/
});

d3.select('#red').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "red");      
});

d3.select('#green').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "green");      
});

d3.select('#blue').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "blue");      
});

d3.select('#black').on('click', function() {
  svg.selectAll("circle")
     .transition()
     .delay(function(d, i) { return Math.log(i+1)*100; })
     .attr("fill", "black");      
});

d3.select('#radio').on('change', function() {
  svg.selectAll("circle").attr("r", radio.value);      
});