title: d3.js touch and hold to create a line from one element to another
body: <p>I'm trying to create a visualisation using d3.js on android (using apache cordova) where I display some elements (for example circles) on the phone's screen and have the possibility to create links (lines for example) between elements. </p>
  
  <p>How it should work:</p>
  
  <ol>
  <li>touch and hold on the start element</li>
  <li>drag to the second element</li>
  <li>release</li>
  </ol>
  
  <p>A new link should now be formed between the 2 elements. I can achieve this with relative ease using the mouse events, but I'm having difficulties in achieving the same using touch support.</p>
  
  <p>This is a minimum example to show the problem that I'm facing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var width = 350,
      height = 600,
      colors = d3.scale.category10();
  
  var nodeData =
      [
          { id: 1, x: 50, y: 50 },
          { id: 2, x: 200, y: 50 },
          { id: 3, x: 125, y: 150 }
      ];
  
  var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height);
  
  
  var node = svg.selectAll('g')
      .data(nodeData)
      .enter()
      .append('g');
  
  node.append('circle')
      .attr('cx', function (d) { return d.x; })
      .attr('cy', function (d) { return d.y; })
      .attr('r', 30)
      .attr('fill', 'red')
      .on('touchstart', function (node) {
      })
      .on('touchend', function (node) {
      });
  
  node.append('text')
      .attr('fill', 'white')
      .attr('x', function (d) { return d.x; })
      .attr('y', function (d) { return d.y; })
      .text(function (d) { return d.id; });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this example the <strong>touchend</strong> event is always executed on the same element as <strong>touchstart</strong> and I couldn't find a way to obtain the element on top of which the touch operation has ended.</p>
  
  <p>I just started using d3.js so any help is appreciated.</p>
  
  <p>Cheers</p>