diff --git a/src/traces/sankey/render.js b/src/traces/sankey/render.js index 848613c2272..53334540c36 100644 --- a/src/traces/sankey/render.js +++ b/src/traces/sankey/render.js @@ -181,8 +181,8 @@ function nodeModel(uniqueKeys, d, n) { var tc = tinycolor(n.color), zoneThicknessPad = c.nodePadAcross, zoneLengthPad = d.nodePad / 2, - visibleThickness = n.dx + 0.5, - visibleLength = Math.max(1, n.dy - 0.5); + visibleThickness = n.dx, + visibleLength = Math.max(0.5, n.dy); var basicKey = n.label; var foundKey = uniqueKeys[basicKey]; @@ -203,7 +203,7 @@ function nodeModel(uniqueKeys, d, n) { textFont: d.textFont, size: d.horizontal ? d.height : d.width, visibleWidth: Math.ceil(visibleThickness), - visibleHeight: Math.ceil(visibleLength), + visibleHeight: visibleLength, zoneX: -zoneThicknessPad, zoneY: -zoneLengthPad, zoneWidth: visibleThickness + 2 * zoneThicknessPad, @@ -227,14 +227,10 @@ function nodeModel(uniqueKeys, d, n) { // rendering snippets -function crispLinesOnEnd(sankeyNode) { - d3.select(sankeyNode.node().parentNode).style('shape-rendering', 'crispEdges'); -} - function updateNodePositions(sankeyNode) { sankeyNode .attr('transform', function(d) { - return 'translate(' + (d.node.x - 0.5) + ', ' + (d.node.y - d.node.dy / 2 + 0.5) + ')'; + return 'translate(' + d.node.x.toFixed(3) + ', ' + (d.node.y - d.node.dy / 2).toFixed(3) + ')'; }); } @@ -247,7 +243,6 @@ function linkPath(d) { } function updateNodeShapes(sankeyNode) { - d3.select(sankeyNode.node().parentNode).style('shape-rendering', 'optimizeSpeed'); sankeyNode.call(updateNodePositions); } @@ -360,7 +355,6 @@ function attachDragHandler(sankeyNode, sankeyLink, callbacks) { if(d.arrangement !== 'snap') { d.sankey.relayout(); updateShapes(sankeyNode.filter(sameLayer(d)), sankeyLink); - sankeyNode.call(crispLinesOnEnd); } }) @@ -414,15 +408,11 @@ function snappingForce(sankeyNode, forceKey, nodes, d) { } if(!d.interactionState.dragInProgress && maxVelocity < 0.1 && d.forceLayouts[forceKey].alpha() > 0) { d.forceLayouts[forceKey].alpha(0); - window.setTimeout(function() { - sankeyNode.call(crispLinesOnEnd); - }, 30); // geome on move, crisp when static } }; } // scene graph - module.exports = function(svg, styledData, layout, callbacks) { var sankey = svg.selectAll('.sankey') .data(styledData @@ -495,7 +485,6 @@ module.exports = function(svg, styledData, layout, callbacks) { sankeyNodeSet.enter() .append('g') - .style('shape-rendering', 'geometricPrecision') .classed('sankeyNodeSet', true); sankeyNodeSet diff --git a/test/image/baselines/sankey_energy.png b/test/image/baselines/sankey_energy.png index 3ca3c968929..0e059234f0b 100644 Binary files a/test/image/baselines/sankey_energy.png and b/test/image/baselines/sankey_energy.png differ diff --git a/test/image/baselines/sankey_energy_dark.png b/test/image/baselines/sankey_energy_dark.png index d03951eaf46..794016ca7b3 100644 Binary files a/test/image/baselines/sankey_energy_dark.png and b/test/image/baselines/sankey_energy_dark.png differ diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index a67a2615040..92f2197bbb9 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -366,7 +366,7 @@ describe('sankey tests', function() { .then(function() { expect(d3.selectAll('.sankey .nodeRect')[0].reduce(function(prevMin, rect) { return Math.min(prevMin, d3.select(rect).attr('height')); - }, Infinity)).toEqual(1); + }, Infinity)).toEqual(0.5); done(); }); }); @@ -375,7 +375,7 @@ describe('sankey tests', function() { describe('Test hover/click interactions:', function() { afterEach(destroyGraphDiv); - it('should shows the correct hover labels', function(done) { + it('should show the correct hover labels', function(done) { var gd = createGraphDiv(); var mockCopy = Lib.extendDeep({}, mock); @@ -386,7 +386,7 @@ describe('sankey tests', function() { } Plotly.plot(gd, mockCopy).then(function() { - _hover(400, 300); + _hover(404, 302); assertLabel( ['Solid', 'Incoming flow count: 4', 'Outgoing flow count: 3', '447TWh'], @@ -404,7 +404,7 @@ describe('sankey tests', function() { return Plotly.relayout(gd, 'hoverlabel.font.family', 'Roboto'); }) .then(function() { - _hover(400, 300); + _hover(404, 302); assertLabel( ['Solid', 'Incoming flow count: 4', 'Outgoing flow count: 3', '447TWh'], @@ -427,7 +427,7 @@ describe('sankey tests', function() { }); }) .then(function() { - _hover(400, 300); + _hover(404, 302); assertLabel( ['Solid', 'Incoming flow count: 4', 'Outgoing flow count: 3', '447TWh'], @@ -482,7 +482,7 @@ describe('sankey tests', function() { function _makeWrapper(eventType, mouseFn) { var posByElementType = { - node: [400, 300], + node: [404, 302], link: [450, 300] };