JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>

<ul class="menu">    
    <li><a class="edit">Edit Area</a></li>
    <li><a class="clear">Clear Area</a></li>
    <li><a class="draw">Draw Area</a></li>  
</ul>

<div id="holder">
    <div id="canvas1"></div>
</div>

CSS

.menu{
    margin:0;
    padding:3px;
    background: grey;    
    list-style-type:none;
    overflow:hidden;
}

.menu li{
    float:left;
    background: white;
    margin-right:5px;
}

.menu li a{
    display:block;
    cursor: pointer;
    padding: 5px;
}

.menu li:hover{
    background: gold;
}


path {
        stroke: #000;
        stroke-width: 1;
        fill: none;
    }

.selectioncomplete{
    fill: crimson;
    fill-opacity:0.2;
}



circle {
  fill: #000;
  fill-opacity: .5;
  cursor: move;
}


rect {
  fill: none;
  pointer-events: all;
}

JavaScript

var menuHandler = {
    invoke: function(){
        $('.clear').click(function(e) {
            e.preventDefault();
            console.log("clear path");
            
            $("#canvas1").empty();
        });
        
        $('.edit').click(function(e) {
            e.preventDefault();
            console.log("start editing");
            
         
            if(!$("#canvas1").hasClass("editing")){
                shapeEditor.startEditing();
            }else{
                shapeEditor.stopEditing();
            }            
            
        }); 
 
        $('.draw').click(function(e) {
            e.preventDefault();
            console.log("start drawing");
            
            shapeSelector.invoke();
            
        });
    }
}

menuHandler.invoke();

//////////////////////////////


var shapeSelector = {
        invoke: function(){
            var that = this;
            
            // An array to hold the coordinates
            // of the line drawn on each svg.
            var  coords = []
            this.line = d3.svg.line();
            
            this.drag = this.getDragBehaviours()
            
            this.svg = d3.select("#canvas1").append("svg")
            .attr({
                width: "100%",
                height: "100%"
            }).call(that.drag);
                      

        },
        getDragBehaviours: function(){
            var that = this;
                  
            // Set the behavior for each part
            // of the drag.
            drag = d3.behavior.drag()
                .on("dragstart", function() {
                    // Empty the coords array.
                    coords = [];
                    svg = d3.select(this);
                    
                    // If a selection line already exists,
                    // remove it.
                    svg.select(".selection").remove();
                    
                    // Add a new selection line.
                   ...