Triangulo 01

_.md

[ Launch: Triangulo 01 ] 10907030 by karlin
[ Launch: Triangulo 01 ] 9494935 by ccom3033

config.json

{"description":"Triangulo 01","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/BCtCXyM.png"}

inlet.js

// Muestra un triangulo y permite dar resize al hacer 
// drag en los vertices.


var triangle = g.append("g");

var xa = 150;
var ya = 150;
var xb = 334;
var yb = 250;

var a = [[xa,ya],[xb,yb],[xa,yb]]; 

g.append("polygon")
  .attr("fill","#fff389")
  .attr("stroke-width", 2)
  .attr("points",a)
  .on("mouseover", function(d, i){
	    d3.select(this).style({fill: "#FF8"});
	})
	.on("mouseout", function(d, i){
		d3.select(this).style({fill: "#fff389"});
    })
  .call(d3.behavior.drag().on("drag", movePoly));

var p = g.append("g");

for ( i = 0; i < a.length ; i++) {
  p.append("ellipse")
   .attr("rx",10)
   .attr("ry", 10)
   .attr("fill", "#f88")
   .attr("cx",a[i][0])
   .attr("cy",a[i][1])
  .on("mouseover", function(d, i){
		d3.select(this).style({fill: "#88f"});
	})
	.on("mouseout", function(d, i){
		d3.select(this).style({fill: "#f88"});
    })
  .call(d3.behavior.drag().on("drag", move));
   
}


function move(){
	this.parentNode.appendChild(this);
	var dragTarget = d3.select(this);
	var x = parseInt(dragTarget.attr("cx"),10);
	var y = parseInt(dragTarget.attr("cy"),10);
  
	dragTarget.attr("cx", x + d3.event.dx );
	dragTarget.attr("cy", y + d3.event.dy );

	a = []
	p.selectAll("ellipse").each(
      function() {
        a.push([this.getAttribute("cx"), this.getAttribute("cy")]);
                 
      }
  );

 

  g.select("polygon").attr("points",a);
}

function movePoly(){
	var dragTarget = d3.select(this);

	var points = dragTarget.attr("points");
    a = []

    p.selectAll("ellipse").each(
        function(d) {
          var x = parseInt(this.getAttribute("cx"),10);
          var y = parseInt(this.getAttribute("cy"),10);
          this.setAttribute("cx", x + d3.event.dx );
          this.setAttribute("cy", y + d3.event.dy );
          a.push([this.getAttribute("cx"), this.getAttribute("cy")]);       
        }
    );
  
    this.setAttribute("points",a);
}