Redrawing heatmap on zoom in D3.js/v4
<p>I have a heatmap on D3.js v4 and I am trying to add zoom and panning feature to it. Zoom will only work on x axis and it will not change y axis. Parts related to zooming are below:</p>

<pre><code>var x = d3.scaleTime().range([0, width]).domain([minDate, maxDate]);
var xAxis = d3.axisBottom().scale(x);
var zoom = d3.zoom().scaleExtent([1, 2])
             .translateExtent([[80, 20], [width, height]])
             .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
    xAxis.scale(d3.event.transform.rescaleX(x));
    svg.select(".x.axis").call(xAxis);
    update();
}

function update() {
    svg.selectAll(".cell")
        .attr('clip-path', 'url(#plotAreaClip)')
        .attr("x", function (d) { return x(d.timestamp); })
        .attr("y", function (d) { return y(d.hour); })
        .attr("width", function (d) { return x(d3.timeWeek.offset(d.timestamp, 1)) - x(d.timestamp); })
        .attr("height", function (d) { return y(d.hour + 1) - y(d.hour); })
        .attr("fill", function (d) { return colorScale(d.value); });
}
</code></pre>

<p>When I actually comment out <code>update()</code> in <code>zoomed()</code> function, I can see that axis zooms in/out just fine. But when <code>update()</code> is in the function, it just removes all rectangles in the chart.</p>

<p>JS Fiddle link is <a href="https://jsfiddle.net/7z1f4c5p/" rel="nofollow noreferrer">https://jsfiddle.net/7z1f4c5p/</a> (I don't know a way to upload csv file to JSFiddle so I had to write whole data to JS part. Sorry about that. Code is at the bottom. If you remove the comment on 97th line, zooming will not work.</p>