Chart Tool Functions

by Amanda Williamson

HTML

<button id="rectangle" onclick="Rectangle()">Rectangle</button>
<button id="circle" onclick="Circle()">Circle</button>
<button id="triangle" onclick="Triangle()">Triangle</button>
<button id="polygon" onclick="Polygon()">Polygon</button>
<button id="line" onclick="Line()">Line</button>
<button id="rayOne" onclick="RayOne()">Ray (one side)</button>
<button id="rayTwo" onclick="RayTwo()">Ray (two sides)</button>
<button id="brush" onclick="Brush()">Brush</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;
}

.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

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

function Rectangle() {
    var rect, rectData = [ ], isDown = false, m1, m2, isDrag = false;
    
    svg.on('mousedown', function() {
        m1 = d3.mouse(this);
        if (!isDown && !rect) { 
            drawRect();
            rectData[0] = { x: m1[0], y: m1[1] };        
            updateRect();
            isDrag = false;
        } else {      
            rect.call(dragR);
            d3.selectAll('.pointR').call(dragC);
            isDrag = true;
        }
        isDown = !isDown;     
    })
    
    .on('mousemove', function() {
        m2 = d3.mouse(this);
        if(rect && isDown && !isDrag) { 
            rectData[1] = { x: m2[0], y: m2[1] };
            updateRect();
        } 
    });  
    
    function drawRect() {
        rect = svg.append('rect').attr('class', 'rectangle');    
    }
    
    function updateRect() {     
        if(rectData.length > 1){
            rect.attr({
                x: rectData[1].x - rectData[0].x > 0 ? rectData[0].x :  rectData[1].x,
                y: rectData[1].y - rectData[0].y > 0 ? rectData[0].y :  rectData[1].y,
                width: Math.abs(rectData[1].x - rectData[0].x),
                height: Math.abs(rectData[1].y - rectData[0].y)
            });             
            var pointR = svg.selectAll('.pointR').data(rectData);
            pointR.enter().append('circle').attr('class', 'pointR')
                  .attr('id', function (d, i) { return i + 1 })
                  .attr('r', 5);        
            pointR.attr('cx', function (d) { return d.x })
                  .attr('cy', function (d) { return d.y });
        }
    }
      
    var dragR = d3.behavior.drag().on('drag', dragRect);
    
    function dragRect() {
        var e = d3.event;
        rectData.forEach(function(datum, index){
            datum.x += e.dx;
            datum.y += e.dy;
        });    
        rect.style('cursor', 'move');
  ...