d3 call function

by sachid

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg class="canvas" width="1000" height="500">
  <g id="input-container">

  </g>
  <g id="output-container">

  </g>

</svg>
<p class="coors"></p>

JavaScript

var pbox = d3.select(".coors");

     var inputs = [{
       "text": "inleaf1",
       "col": "red"
     }, {
       "text": "inleaf2",
       "col": "blue"
     }, {
       "text": "inleaf3",
       "col": "green"
     }];
     var outputs = [{
       "text": "outleaf1",
       "col": "red"
     }, {
       "text": "outleaf2",
       "col": "blue"
     }, {
       "text": "outleaf3",
       "col": "green"
     }];

     var elementwidth = 120;
     var elementheight = 50;
     var inputstartx = 20;
     var inputstarty = 20;
     var verticalmargin = 20;

     var canvas = d3.select(".canvas");
     var inputcontainer = d3.select("#input-container");


     var coordinates, dragdot2, dragline, xx, yy;
     
     // this is a drag function called at the last line-------------------------------------
     var dragme = d3.drag()
       .on("start", function(d) {
         xx = 0;
         yy = 0;
         coordinates = [0, 0];
         dragdot2 = canvas.append("svg:circle")
           .attr("cx", function(d) {
             return inputstartx + elementwidth;
           })
           .attr("cy", function(d, i) {
             return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
           })
           .attr("r", function() {
             return elementheight / 4;
           })
           .attr("fill", "black");
         dragline = canvas.append("svg:line")
           .attr("x1", function(d) {
             return inputstartx + elementwidth;
           })
           .attr("x2", function(d) {
             return inputstartx + elementwidth;
           })
           .attr("y1", function(d, i) {
             return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
           })
           .attr("y2", function(d, i) {
             return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
           })
           .style("stroke", "rgb(0,150,150)")
           .style("stroke-width", "2");
      ...