diff --git a/src/traces/bar/plot.js b/src/traces/bar/plot.js index 0ba64571ec8..5b3a4532c2e 100644 --- a/src/traces/bar/plot.js +++ b/src/traces/bar/plot.js @@ -31,6 +31,13 @@ var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPo // padding in pixels around text var TEXTPAD = 3; +function keyFunc(d) {return d.id;} +function getKeyFunc(trace) { + if(trace.ids) { + return keyFunc; + } +} + function dirSign(a, b) { return (a < b) ? 1 : -1; } @@ -103,7 +110,8 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback) var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points'); - var bars = pointGroup.selectAll('g.point').data(Lib.identity); + var keyFunc = getKeyFunc(trace); + var bars = pointGroup.selectAll('g.point').data(Lib.identity, keyFunc); bars.enter().append('g') .classed('point', true); diff --git a/test/image/mocks/animation_bar.json b/test/image/mocks/animation_bar.json index 60955f86ff7..8be060cb94d 100644 --- a/test/image/mocks/animation_bar.json +++ b/test/image/mocks/animation_bar.json @@ -3,6 +3,7 @@ "type": "bar", "x": ["A", "B", "C"], "y": [24, 5, 8], + "ids": ["A", "B", "C"], "error_y": {"array": [3, 2, 1]} }], "layout": { @@ -17,6 +18,7 @@ {"data": [{"width": 0.25}]}, {"data": [{"marker": {"line": {"width": 10}}}]}, {"data": [{"marker": {"line": {"color": ["orange", "yellow", "blue"]}}}]}, + {"data": [{"ids": ["B", "C", "A"]}]}, {"layout": {"yaxis": {"range": [0, 20]}}} ] } diff --git a/test/jasmine/assets/check_transitions.js b/test/jasmine/assets/check_transitions.js index 35f4df88bb2..520736d63c8 100644 --- a/test/jasmine/assets/check_transitions.js +++ b/test/jasmine/assets/check_transitions.js @@ -89,7 +89,10 @@ function assert(test) { var cur = []; d3.selectAll(test[1]).each(function(d, i) { if(test[2] === 'style') cur[i] = this.style[test[3]]; - if(test[2] === 'attr') cur[i] = d3.select(this).attr(test[3]); + else if(test[2] === 'attr') cur[i] = d3.select(this).attr(test[3]); + else if(test[2] === 'datum') { + cur[i] = d3.select(this).datum()[test[3]]; + } }); switch(test[3]) { case 'd': diff --git a/test/jasmine/tests/bar_test.js b/test/jasmine/tests/bar_test.js index 2b36d728017..bcc79108e9d 100644 --- a/test/jasmine/tests/bar_test.js +++ b/test/jasmine/tests/bar_test.js @@ -2683,4 +2683,45 @@ describe('bar tweening', function() { .catch(failTest) .then(done); }); + + it('for bar positions during object-constancy transitions', function(done) { + var _mock = { + data: [{ + type: 'bar', + ids: ['A', 'B', 'C'], + x: ['A', 'B', 'C'], + text: ['A', 'B', 'C'], + textposition: 'inside', + y: [24, 5, 8], + error_y: {'array': [3, 2, 1]}, + marker: {color: ['red', 'green', 'blue']} + }] + }; + + var nextFrame = { data: [{ ids: ['B', 'C', 'A'] }] }; + + var tests = [ + [0, '.point path', 'datum', 'id', ['A', 'B', 'C']], + [0, '.point path', 'style', 'fill', ['rgb(255, 0, 0)', 'rgb(0, 128, 0)', 'rgb(0, 0, 255)']], + [0, '.point path', 'attr', 'd', ['M18,270V42H162V270Z', 'M198,270V222.5H342V270Z', 'M378,270V194H522V270Z']], + [0, 'text.bartext', 'attr', 'transform', ['translate(90 56)', 'translate(270 236.5)', 'translate(450 208)']], + [0, 'path.yerror', 'attr', 'd', ['M86,14h8m-4,0V71m-4,0h8', 'M266,204h8m-4,0V242m-4,0h8', 'M446,185h8m-4,0V204m-4,0h8']], + + [250, '.point path', 'datum', 'id', ['A', 'B', 'C']], + [250, '.point path', 'style', 'fill', ['rgb(128, 0, 128)', 'rgb(128, 64, 0)', 'rgb(0, 64, 128)']], + [250, '.point path', 'attr', 'd', ['M198,270V118H342V270Z', 'M108,270V132H252V270Z', 'M288,270V208H432V270Z']], + [250, 'text.bartext', 'attr', 'transform', ['translate(269.7890625 134)', 'translate(179.5859375 148.25)', 'translate(359.578125 224.25)']], + [250, 'path.yerror', 'attr', 'd', ['M266,99h8m-4,0V137m-4,0h8', 'M176,109h8m-4,0V156m-4,0h8', 'M356,194h8m-4,0V223m-4,0h8']], + + [500, '.point path', 'datum', 'id', ['A', 'B', 'C']], + [500, '.point path', 'style', 'fill', ['rgb(0, 0, 255)', 'rgb(255, 0, 0)', 'rgb(0, 128, 0)']], + [500, '.point path', 'attr', 'd', ['M378,270V194H522V270Z', 'M18,270V42H162V270Z', 'M198,270V223H342V270Z']], + [500, 'text.bartext', 'attr', 'transform', ['translate(450 208)', 'translate(90 56)', 'translate(270 236.5)']], + [500, 'path.yerror', 'attr', 'd', ['M446,185h8m-4,0V204m-4,0h8', 'M86,14h8m-4,0V71m-4,0h8', 'M266,204h8m-4,0V242m-4,0h8']] + ]; + + checkTransition(gd, _mock, nextFrame, transitionOpts, tests) + .catch(failTest) + .then(done); + }); });