Edit in JSFiddle

   var data = [];

   var margin = {
       top: 20,
       right: 15,
       bottom: 20,
       left: 60
     },
     width = 600 - margin.left - margin.right,
     height = 600 - margin.top - margin.bottom;


   var div = d3.select("#content").append("div")
     .attr("class", "tooltip")
     .style("opacity", 0);

   var drag = d3.behavior.drag()
     .origin(function(d) {
       return dotcord(d);
     })
     .on("dragstart", dragstarted)
     .on("drag", dragged)
     .on("dragend", dragended);


   var x = d3.scale.linear().domain([0, 1]).range([0, width]);
   var y = d3.scale.linear().domain([0, 1]).range([height, 0]);
   var ax = d3.scale.linear().domain([0, width]).range([0, 1]);
   var ay = d3.scale.linear().domain([height, 0]).range([0, 1]);


   var svg = d3.select('#content')
     .append('svg')
     .on('dblclick', function() {
       cx = d3.event.layerX - margin.left - 8;
       cy = d3.event.layerY - margin.top - 8;
       sx = ax(cx)
       sy = ay(cy)
       data.push({
         x: sx,
         y: sy
       });
       showCircles();
       dots.selectAll('circle').each(function(d) {
         if (d.x == sx && d.y == sy)
           d3.select(this).attr("cx", cx).attr("cy", cy);
       });
     })
     .attr('width', width + margin.right + margin.left)
     .attr('height', height + margin.top + margin.bottom)

   var main = svg.append('g')
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

   var xAxis = d3.svg.axis().scale(x).orient('bottom');
   var yAxis = d3.svg.axis().scale(y).orient('left');

   main.append('g')
     .attr('transform', 'translate(0,' + height + ')')
     .attr('class', 'main axis date')
     .call(xAxis);

   main.append('g')
     .attr('transform', 'translate(0,0)')
     .attr('class', 'main axis date')
     .call(yAxis);

   dots = main.append("g")
   showCircles();

   function showCircles() {

     dots.selectAll("circle")
       .data(data)
       .enter().append("circle")
       .attr("cx", function(d, i) {
         return x(d.x);
       })
       .attr("cy", function(d) {
         return y(d.y);
       })
       .attr("r", 5)
       .on('dblclick', function(d) {
         d3.event.stopPropagation();

         ndata = []
         rdata = []
         for (i = 0; i < data.length; i++) {
           if (data[i].x != d.x || data[i].y != d.y)
             ndata.push(data[i])
           else
             rdata.push(data[i])
         }

         div.transition().style("opacity", 0);
         data = []
         dots.selectAll("circle").data(data).exit().remove()
         data = ndata
         showCircles()


       })
       .on("mouseover", function(d) {
         if (d3.select(this).classed('dragging'))
           return
         div.transition()
           .duration(500)
           .style("opacity", .9);
         div.html(mround(d.x) + ", " + mround(d.y))
           .style("left", (x(d.x) + margin.left - 30) + "px")
           .style("top", (y(d.y) + margin.top - 15) + "px");
       })
       .on("mouseout", function(d) {
         div.transition()
           .duration(200)
           .style("opacity", 0);
       })
       .call(drag);
   }

   function dotcord(d) {
     return {
       x: x(d.x),
       y: y(d.y)
     };
   }

   function dragstarted(d) {
     d3.event.sourceEvent.stopPropagation();
     d3.select(this).classed("dragging", true);
     div.style("opacity", 0);
   }

   function dragged(d) {

     d.x = ax(d3.event.x)
     d.y = ay(d3.event.y)

     d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
   }

   function dragended(d) {
     d3.select(this).classed("dragging", false);
   }

   function mround(num) {
     return Math.round(num * 1000) / 1000
   }

   d3.select("#clear").on('click', function() {
     data = []
     dots.selectAll("circle").data(data).exit().remove()
   });

   d3.select("#show_cords").on('click', function() {
     cords = ''
     dots.selectAll('circle').each(function(d) {
       cords += mround(d.x) + ', ' + mround(d.y) + '<br>'
     });
     d3.select('#cords').html(cords)
     if (cords.length == 0)
       d3.select('#cords').html('Empty')
   });


   d3.select("#show_map").on('click', function() {
     if (d3.selectAll("#show_map").property('checked'))
       d3.selectAll("#map").style('display', 'block')
     else
       d3.selectAll("#map").style('display', 'none')
   });
.content {
  /*text-align:center	*/
}

.main text {
  font: 10px sans-serif;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
}

.axis line,
.axis path {
  shape-rendering: crispEdges;
  stroke: black;
  fill: none;
}

circle {
  fill: lightsteelblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 80px;
  height: 15px;
  font: 12px sans-serif;
  /* border: 1px solid black;		*/
  pointer-events: none;
}

svg {
  z-index: 500
}
<body>
  <img id="map" src="https://www.renater.fr/IMG/png/carte-RENATER-2.png" / style="width:830px; position:absolute; top:-80px; left:0px; z-index:-2; display:none">
  <div id='content' style="float:left">
  </div>
  Double-click on the chart to add nodes, drag and drop, double-click on the node to remove it
  <br>
  <br>
  <input id="show_map" type="checkbox">Show map
  <br>
  <button id="show_cords"> Write coordinates </button>
  <button id="clear"> Clear </button>

  <div id="cords" style="padding-top:20px; height:470px; overflow-y: scroll;">
  </div>
</body>