Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 2cc7804

Browse filesBrowse files
monferamonfera
authored
Merge pull request plotly#2021 from plotly/sankey-micro-alignment
Sankey link/node pixel level alignment
2 parents a307331 + 4d52bbb commit 2cc7804
Copy full SHA for 2cc7804

File tree

4 files changed

+10
-21
lines changed
Filter options

4 files changed

+10
-21
lines changed

‎src/traces/sankey/render.js

Copy file name to clipboardExpand all lines: src/traces/sankey/render.js
+4-15Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,8 @@ function nodeModel(uniqueKeys, d, n) {
181181
var tc = tinycolor(n.color),
182182
zoneThicknessPad = c.nodePadAcross,
183183
zoneLengthPad = d.nodePad / 2,
184-
visibleThickness = n.dx + 0.5,
185-
visibleLength = Math.max(1, n.dy - 0.5);
184+
visibleThickness = n.dx,
185+
visibleLength = Math.max(0.5, n.dy);
186186

187187
var basicKey = n.label;
188188
var foundKey = uniqueKeys[basicKey];
@@ -203,7 +203,7 @@ function nodeModel(uniqueKeys, d, n) {
203203
textFont: d.textFont,
204204
size: d.horizontal ? d.height : d.width,
205205
visibleWidth: Math.ceil(visibleThickness),
206-
visibleHeight: Math.ceil(visibleLength),
206+
visibleHeight: visibleLength,
207207
zoneX: -zoneThicknessPad,
208208
zoneY: -zoneLengthPad,
209209
zoneWidth: visibleThickness + 2 * zoneThicknessPad,
@@ -227,14 +227,10 @@ function nodeModel(uniqueKeys, d, n) {
227227

228228
// rendering snippets
229229

230-
function crispLinesOnEnd(sankeyNode) {
231-
d3.select(sankeyNode.node().parentNode).style('shape-rendering', 'crispEdges');
232-
}
233-
234230
function updateNodePositions(sankeyNode) {
235231
sankeyNode
236232
.attr('transform', function(d) {
237-
return 'translate(' + (d.node.x - 0.5) + ', ' + (d.node.y - d.node.dy / 2 + 0.5) + ')';
233+
return 'translate(' + d.node.x.toFixed(3) + ', ' + (d.node.y - d.node.dy / 2).toFixed(3) + ')';
238234
});
239235
}
240236

@@ -247,7 +243,6 @@ function linkPath(d) {
247243
}
248244

249245
function updateNodeShapes(sankeyNode) {
250-
d3.select(sankeyNode.node().parentNode).style('shape-rendering', 'optimizeSpeed');
251246
sankeyNode.call(updateNodePositions);
252247
}
253248

@@ -360,7 +355,6 @@ function attachDragHandler(sankeyNode, sankeyLink, callbacks) {
360355
if(d.arrangement !== 'snap') {
361356
d.sankey.relayout();
362357
updateShapes(sankeyNode.filter(sameLayer(d)), sankeyLink);
363-
sankeyNode.call(crispLinesOnEnd);
364358
}
365359
})
366360

@@ -414,15 +408,11 @@ function snappingForce(sankeyNode, forceKey, nodes, d) {
414408
}
415409
if(!d.interactionState.dragInProgress && maxVelocity < 0.1 && d.forceLayouts[forceKey].alpha() > 0) {
416410
d.forceLayouts[forceKey].alpha(0);
417-
window.setTimeout(function() {
418-
sankeyNode.call(crispLinesOnEnd);
419-
}, 30); // geome on move, crisp when static
420411
}
421412
};
422413
}
423414

424415
// scene graph
425-
426416
module.exports = function(svg, styledData, layout, callbacks) {
427417
var sankey = svg.selectAll('.sankey')
428418
.data(styledData
@@ -495,7 +485,6 @@ module.exports = function(svg, styledData, layout, callbacks) {
495485

496486
sankeyNodeSet.enter()
497487
.append('g')
498-
.style('shape-rendering', 'geometricPrecision')
499488
.classed('sankeyNodeSet', true);
500489

501490
sankeyNodeSet

‎test/image/baselines/sankey_energy.png

Copy file name to clipboard
791 Bytes
Loading

‎test/image/baselines/sankey_energy_dark.png

Copy file name to clipboard
-3.41 KB
Loading

‎test/jasmine/tests/sankey_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/sankey_test.js
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ describe('sankey tests', function() {
366366
.then(function() {
367367
expect(d3.selectAll('.sankey .nodeRect')[0].reduce(function(prevMin, rect) {
368368
return Math.min(prevMin, d3.select(rect).attr('height'));
369-
}, Infinity)).toEqual(1);
369+
}, Infinity)).toEqual(0.5);
370370
done();
371371
});
372372
});
@@ -375,7 +375,7 @@ describe('sankey tests', function() {
375375
describe('Test hover/click interactions:', function() {
376376
afterEach(destroyGraphDiv);
377377

378-
it('should shows the correct hover labels', function(done) {
378+
it('should show the correct hover labels', function(done) {
379379
var gd = createGraphDiv();
380380
var mockCopy = Lib.extendDeep({}, mock);
381381

@@ -386,7 +386,7 @@ describe('sankey tests', function() {
386386
}
387387

388388
Plotly.plot(gd, mockCopy).then(function() {
389-
_hover(400, 300);
389+
_hover(404, 302);
390390

391391
assertLabel(
392392
['Solid', 'Incoming flow count: 4', 'Outgoing flow count: 3', '447TWh'],
@@ -404,7 +404,7 @@ describe('sankey tests', function() {
404404
return Plotly.relayout(gd, 'hoverlabel.font.family', 'Roboto');
405405
})
406406
.then(function() {
407-
_hover(400, 300);
407+
_hover(404, 302);
408408

409409
assertLabel(
410410
['Solid', 'Incoming flow count: 4', 'Outgoing flow count: 3', '447TWh'],
@@ -427,7 +427,7 @@ describe('sankey tests', function() {
427427
});
428428
})
429429
.then(function() {
430-
_hover(400, 300);
430+
_hover(404, 302);
431431

432432
assertLabel(
433433
['Solid', 'Incoming flow count: 4', 'Outgoing flow count: 3', '447TWh'],
@@ -482,7 +482,7 @@ describe('sankey tests', function() {
482482

483483
function _makeWrapper(eventType, mouseFn) {
484484
var posByElementType = {
485-
node: [400, 300],
485+
node: [404, 302],
486486
link: [450, 300]
487487
};
488488

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.