title: Flickering translation with d3 v4 drag function
body: <p><em>The full code is visible and modifiable on <a href="https://beta.observablehq.com/@reyman/heatmap-moving" rel="nofollow noreferrer">observablehq</a></em></p>
  <p>The relevant parts:</p>
  <pre class="lang-js prettyprint-override"><code>  const columns = svg.selectAll(&quot;g&quot;)
                      .data(nested_city)
                      .enter()
                      .append(&quot;g&quot;)
                      .attr(&quot;city&quot;, function(d) { return d.key ;})
                      .attr(&quot;x&quot;,  function(d) { return x(d.key) ;})
                      .attr(&quot;y&quot;, &quot;0&quot;)
                      .attr(&quot;transform&quot;,  function(d) { return &quot;translate(&quot; + x(d.key) + &quot;,0)&quot; ;})
                      .attr(&quot;class&quot;, &quot;column&quot;)
                     .on(&quot;mouseover&quot;, function(d) {
                        d3.select(this)
                          .style(&quot;cursor&quot;,&quot;pointer&quot;);
                    })
                    .on(&quot;mouseout&quot;, function(d){
                      d3.select(this)
                        .style(&quot;cursor&quot;,&quot;default&quot;);
                    })
                      .call(d3.drag()
                      .subject(function() { 
                              var t = d3.select(this);
                              var tr = getTranslation(t.attr(&quot;transform&quot;));
                              return {x: t.attr(&quot;x&quot;) + tr[0],
                                      y: t.attr(&quot;y&quot;) + tr[1]};
                       })
                      .on(&quot;start&quot;, dragstarted)
                      .on(&quot;drag&quot;, dragged)
                      .on(&quot;end&quot;, dragended)); 
  </code></pre>
  <p>and the drag handlers:</p>
  <pre class="lang-js prettyprint-override"><code>      function dragstarted(d) {
         
          d3.select(this).raise().classed(&quot;active&quot;, true);
        }
  
        function dragged(d) {
           
            d3.select(this).attr(&quot;transform&quot;, function(d,i){
              var coordinates = d3.mouse(this);
              var mx = coordinates[0]
              console.log( coordinates[0])
                  return &quot;translate(&quot; + [mx,0] + &quot;)&quot;})
        }
  
        function dragended(d) {
          d3.select(this).classed(&quot;active&quot;, false);
        }
  </code></pre>
  <p>I'm trying to adapt the new drag and drop with translation (<a href="https://stackoverflow.com/questions/38650637/how-to-set-the-origin-while-drag-in-d3-js-in-v4">found here on SO</a>) for d3 v4 version to my example on observableHQ, without success.</p>
  <p>I have a very strange flickering behavior when i drag any of the two column (alternate between jump with old x values and new x values).</p>
  <p>If you have any idea why ?</p>