hunminkoh/index.html

## index.html

<!DOCTYPE html>
<body>

<script src="http://d3js.org/d3.v3.js"></script>

<script type="text/javascript">


function Point(x,y) {
  this.x = x || 0;
  this.y = y || 0;
};

Point.prototype.x = null;
Point.prototype.y = null;

Point.prototype.add = function(v){
	return new Point(this.x + v.x, this.y + v.y);
};

function equiTriangle (cp, width, color){
  this.type = "equiTriangle";
  this.cp = cp;
  this.cx = cp.x;
  this.cy = cp.y;
  this.w = width;
  this.color = color;
  this.angle = Math.PI/3.0

  this.p1 = new Point(this.cx -this.w, this.cy - this.w/Math.sqrt(3));
  this.p2 = new Point(this.cx, this.cy + this.w*2/Math.sqrt(3));
  this.p3 = new Point(this.cx + this.w, this.cy - this.w/Math.sqrt(3));
}

equiTriangle.prototype.getPoints = function () {
  p1 = this.p1;
  p2 = this.p2;
  p3 = this.p3;
  var pointArray = [p1, p2, p3];

  return pointArray;
};

var svg = d3.select("body").append("svg")
       .attr("width", 1000)
       .attr("height", 667),

scaleX = d3.scale.linear()
      .domain([-25,25])
      .range([250,500]),

scaleY = d3.scale.linear()
      .domain([-25,25])
      .range([750,500]);

//color = d3.scale.category10();
var p1 = new Point(0,50);
var t1 = new equiTriangle(p1, 25, "pink");

var arrayOfPolygons =  [
  t1
];

var dragleft = d3.behavior.drag()
    .origin(Object)
    .on("drag", ldragresize);


var newg = svg.append("g");

var tri = newg.selectAll("polygon")
          .data(arrayOfPolygons)
          .enter().append("polygon")
          .attr("points",function(d) {
              var pointStr = "";
              console.log(d.getPoints().length);
                for(var i = 0; i<d.getPoints().length; i++){
                  console.log([scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)]);
                  pointStr+= [scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)].join(",");
                  pointStr+=" ";
                }
                console.log(pointStr);
                return pointStr;
              })

.attr("fill", function(d){return d.color})
.attr("stroke","#666")
  .attr("stroke-width",2);
console.log(t1.p1.x+","+t1.p1.y);

var dragbarleft = newg.append("line")
      .attr("x1",scaleX(t1.getPoints()[0].x) )
      .attr("y1",scaleY(t1.getPoints()[0].y) )
      .attr("x2",scaleX(t1.getPoints()[1].x))
      .attr("y2",scaleY(t1.getPoints()[1].y))
      .attr("id", "dragleft")
      .attr("stroke", "gray")
      .attr("stroke-width", "5")
      .attr("cursor", "ew-resize")
      .call(dragleft);


function ldragresize(d) {

      var oldx1 = scaleX(t1.getPoints()[0].x);
      var oldy1 = scaleY(t1.getPoints()[0].y);
      var oldx2 = scaleX(t1.getPoints()[1].x);
      var oldy2 = scaleY(t1.getPoints()[1].y);

     //Max x on the right is x + width - dragbarw
     //Max x on the left is 0 - (dragbarw/2)
     console.log(scaleX(t1.p1.x));
     console.log(d3.event.dx);
     t1.p1.x += d3.event.dx/Math.sqrt(2);
     t1.p2.y -= d3.event.dx*Math.sqrt(3)/3.0;
     t1.p2.x = (t1.p1.x + t1.p3.x)/2;

      dragbarleft
        .attr("x1", function(d) { return scaleX(t1.p1.x); })
        .attr("x2", function(d) { return scaleX(t1.p2.x); })
        .attr("y2", function(d) { return scaleY(t1.p2.y); });

      tri
        .attr("points", function(d) {
            var pointStr = "";

              for(var i = 0; i<d.getPoints().length; i++){

                pointStr+= [scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)].join(",");
                pointStr+=" ";
              }

              return pointStr;
            })
}

</script>

	<!DOCTYPE html>
	<body>

	<script src="http://d3js.org/d3.v3.js"></script>

	<script type="text/javascript">


	function Point(x,y) {
	this.x = x \|\| 0;
	this.y = y \|\| 0;
	};

	Point.prototype.x = null;
	Point.prototype.y = null;

	Point.prototype.add = function(v){
	return new Point(this.x + v.x, this.y + v.y);
	};

	function equiTriangle (cp, width, color){
	this.type = "equiTriangle";
	this.cp = cp;
	this.cx = cp.x;
	this.cy = cp.y;
	this.w = width;
	this.color = color;
	this.angle = Math.PI/3.0

	this.p1 = new Point(this.cx -this.w, this.cy - this.w/Math.sqrt(3));
	this.p2 = new Point(this.cx, this.cy + this.w*2/Math.sqrt(3));
	this.p3 = new Point(this.cx + this.w, this.cy - this.w/Math.sqrt(3));
	}

	equiTriangle.prototype.getPoints = function () {
	p1 = this.p1;
	p2 = this.p2;
	p3 = this.p3;
	var pointArray = [p1, p2, p3];

	return pointArray;
	};

	var svg = d3.select("body").append("svg")
	.attr("width", 1000)
	.attr("height", 667),

	scaleX = d3.scale.linear()
	.domain([-25,25])
	.range([250,500]),

	scaleY = d3.scale.linear()
	.domain([-25,25])
	.range([750,500]);

	//color = d3.scale.category10();
	var p1 = new Point(0,50);
	var t1 = new equiTriangle(p1, 25, "pink");

	var arrayOfPolygons = [
	t1
	];

	var dragleft = d3.behavior.drag()
	.origin(Object)
	.on("drag", ldragresize);


	var newg = svg.append("g");

	var tri = newg.selectAll("polygon")
	.data(arrayOfPolygons)
	.enter().append("polygon")
	.attr("points",function(d) {
	var pointStr = "";
	console.log(d.getPoints().length);
	for(var i = 0; i<d.getPoints().length; i++){
	console.log([scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)]);
	pointStr+= [scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)].join(",");
	pointStr+=" ";
	}
	console.log(pointStr);
	return pointStr;
	})

	.attr("fill", function(d){return d.color})
	.attr("stroke","#666")
	.attr("stroke-width",2);
	console.log(t1.p1.x+","+t1.p1.y);

	var dragbarleft = newg.append("line")
	.attr("x1",scaleX(t1.getPoints()[0].x) )
	.attr("y1",scaleY(t1.getPoints()[0].y) )
	.attr("x2",scaleX(t1.getPoints()[1].x))
	.attr("y2",scaleY(t1.getPoints()[1].y))
	.attr("id", "dragleft")
	.attr("stroke", "gray")
	.attr("stroke-width", "5")
	.attr("cursor", "ew-resize")
	.call(dragleft);


	function ldragresize(d) {

	var oldx1 = scaleX(t1.getPoints()[0].x);
	var oldy1 = scaleY(t1.getPoints()[0].y);
	var oldx2 = scaleX(t1.getPoints()[1].x);
	var oldy2 = scaleY(t1.getPoints()[1].y);

	//Max x on the right is x + width - dragbarw
	//Max x on the left is 0 - (dragbarw/2)
	console.log(scaleX(t1.p1.x));
	console.log(d3.event.dx);
	t1.p1.x += d3.event.dx/Math.sqrt(2);
	t1.p2.y -= d3.event.dx*Math.sqrt(3)/3.0;
	t1.p2.x = (t1.p1.x + t1.p3.x)/2;

	dragbarleft
	.attr("x1", function(d) { return scaleX(t1.p1.x); })
	.attr("x2", function(d) { return scaleX(t1.p2.x); })
	.attr("y2", function(d) { return scaleY(t1.p2.y); });

	tri
	.attr("points", function(d) {
	var pointStr = "";

	for(var i = 0; i<d.getPoints().length; i++){

	pointStr+= [scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)].join(",");
	pointStr+=" ";
	}

	return pointStr;
	})
	}

	</script>