Chart Tool Functions

by Amanda Williamson

HTML

<button id="rectangle">Rectangle</button>
<button id="circle">Circle</button>
<button id="ellipse">Ellipse</button>
<button id="triangle">Triangle</button>
<button id="polygon">Polygon</button>
<button id="line">Line</button>
<button id="rayOne">Ray (one side)</button>
<button id="rayTwo">Ray (two sides)</button>
<button id="brush">Brush</button>
<button id="text">Text</button>

CSS

svg{
    border: 1px solid;
}

.rectangle {
  fill: lightblue;
  stroke: blue;
  stroke-width: 2px;
}

.circle {
  fill: lightgreen;
  stroke: green;
  stroke-width: 2px;
}

.triangle {
  fill: mediumorchid;
  stroke: purple;
  stroke-width: 2px;
}

ellipse {
    stroke: mediumvioletred;
    stroke-width: 2px;
    fill: palevioletred;
}

.polygon {
 fill: lightsalmon;
 stroke: salmon;    
 stroke-width: 2px;
}

.line {
  fill: none;
  stroke: red;
  stroke-width: 2px;
}

.rayOne {
  fill: none;
  stroke: turquoise;
  stroke-width: 2px;
}

.rayTwo {
  fill: none;
  stroke: gold;
  stroke-width: 2px;
}

.brush {
  fill: none;
  stroke: pink;
  stroke-width: 2px;
}

JavaScript

d3.select('#rectangle').on('click', function(){ new Rectangle(); });
d3.select('#circle').on('click', function(){ new Circle(); });
d3.select('#ellipse').on('click', function () { new Ellipse(); });
d3.select('#triangle').on('click', function(){ new Triangle(); });
d3.select('#polygon').on('click', function(){ new Polygon(); });
d3.select('#line').on('click', function(){ new Line(); });
d3.select('#rayOne').on('click', function(){ new RayOne(); });
d3.select('#rayTwo').on('click', function(){ new RayTwo(); });
d3.select('#brush').on('click', function(){ new Brush(); });
d3.select('#text').on('click', function(){ new Text(); });

var w = 600, h = 500;
var svg = d3.select('body').append('svg').attr({width: w, height: h});

function Rectangle() {
    var self = this, rect, rectData = [], isDown = false, m1, m2, isDrag = false;
    
    svg.on('mousedown', function() {
        m1 = d3.mouse(this);
        if (!isDown && !isDrag) {
            self.rectData = [ { x: m1[0], y: m1[1] }, { x: m1[0], y: m1[1] } ];
            self.rectangleElement = d3.select('svg').append('rect').attr('class', 'rectangle').call(dragR);
            self.pointElement1 = d3.select('svg').append('circle').attr('class', 'pointC').call(dragC1);
            self.pointElement2 = d3.select('svg').append('circle').attr('class', 'pointC').call(dragC2);
            updateRect();
            isDrag = false;
        } else { 
            isDrag = true;
        }
        isDown = !isDown;     
    })
    
    .on('mousemove', function() {
        m2 = d3.mouse(this);
        if(isDown && !isDrag) { 
            self.rectData[1] = { x: m2[0], y: m2[1] };
            updateRect();
        } 
    });  
    
    function updateRect() {  
        rect = d3.select(self.rectangleElement[0][0]);
        rect.attr({
            x: self.rectData[1].x - self.rectData[0].x > 0 ? self.rectData[0].x :  self.rectData[1].x,
            y: self.rectData[1].y - self.rectData[0].y > 0 ? self.rectData[0].y : ...