diff --git a/src/traces/heatmap/plot.js b/src/traces/heatmap/plot.js index d2710bded24..bc13f66d163 100644 --- a/src/traces/heatmap/plot.js +++ b/src/traces/heatmap/plot.js @@ -382,7 +382,6 @@ function plotOne(gd, plotinfo, cd) { image3.enter().append('svg:image').attr({ xmlns: xmlnsNamespaces.svg, - 'xlink:href': canvas.toDataURL('image/png'), preserveAspectRatio: 'none' }); @@ -390,7 +389,8 @@ function plotOne(gd, plotinfo, cd) { height: imageHeight, width: imageWidth, x: left, - y: top + y: top, + 'xlink:href': canvas.toDataURL('image/png') }); image3.exit().remove(); diff --git a/test/jasmine/tests/heatmap_test.js b/test/jasmine/tests/heatmap_test.js index 32c6aea150a..0555d590ae4 100644 --- a/test/jasmine/tests/heatmap_test.js +++ b/test/jasmine/tests/heatmap_test.js @@ -334,6 +334,43 @@ describe('heatmap plot', function() { done(); }); }); + + it('should be able to restyle', function(done) { + var mock = require('@mocks/13.json'), + mockCopy = Lib.extendDeep({}, mock), + gd = createGraphDiv(); + + function getImageURL() { + return d3.select('.hm > image').attr('href'); + } + + var imageURLs = []; + + Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() { + imageURLs.push(getImageURL()); + + return Plotly.restyle(gd, 'colorscale', 'Greens'); + }).then(function() { + imageURLs.push(getImageURL()); + + expect(imageURLs[0]).not.toEqual(imageURLs[1]); + + return Plotly.restyle(gd, 'colorscale', 'Reds'); + }).then(function() { + imageURLs.push(getImageURL()); + + expect(imageURLs[1]).not.toEqual(imageURLs[2]); + + return Plotly.restyle(gd, 'colorscale', 'Greens'); + }).then(function() { + imageURLs.push(getImageURL()); + + expect(imageURLs[1]).toEqual(imageURLs[3]); + + done(); + }); + + }); }); describe('heatmap hover', function() {