Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9becb7c

Browse files
etpinardetpinard
committed
hide points using display: 'none' instead of visibility attr
- `display: 'none'` completely removes the elements from the rendering pipeline as is likely faster is all browsers.
1 parent 091473b commit 9becb7c

File tree

4 files changed

+25
-25
lines changed

4 files changed

+25
-25
lines changed

‎src/components/drawing/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ drawing.translatePoints = function(s, xa, ya) {
9595

9696
drawing.hideOutsideRangePoint = function(d, sel, xa, ya) {
9797
sel.attr(
98-
'visibility',
99-
xa.isPtWithinRange(d) && ya.isPtWithinRange(d) ? null : 'hidden'
98+
'display',
99+
xa.isPtWithinRange(d) && ya.isPtWithinRange(d) ? null : 'none'
100100
);
101101
};
102102

‎test/jasmine/assets/custom_assertions.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,12 @@ exports.assertClip = function(sel, isClipped, size, msg) {
6464

6565
};
6666

67-
exports.assertNodeVisibility = function(sel, expectation, msg) {
67+
exports.assertNodeDisplay = function(sel, expectation, msg) {
6868
expect(sel.size())
69-
.toBe(expectation.length, msg + ' visibility (selection size)');
69+
.toBe(expectation.length, msg + ' display (selection size)');
7070

7171
sel.each(function(d, i) {
72-
expect(d3.select(this).attr('visibility'))
73-
.toBe(expectation[i], msg + ' visibility ' + '(item ' + i + ')');
72+
expect(d3.select(this).attr('display'))
73+
.toBe(expectation[i], msg + ' display ' + '(item ' + i + ')');
7474
});
7575
};

‎test/jasmine/tests/scatter_test.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var customAssertions = require('../assets/custom_assertions');
1212
var fail = require('../assets/fail_test');
1313

1414
var assertClip = customAssertions.assertClip;
15-
var assertNodeVisibility = customAssertions.assertNodeVisibility;
15+
var assertNodeDisplay = customAssertions.assertNodeDisplay;
1616

1717
describe('Test scatter', function() {
1818
'use strict';
@@ -690,22 +690,22 @@ describe('Test scatter *clipnaxis*', function() {
690690
// add lines
691691
fig.data[0].mode = 'markers+lines+text';
692692

693-
function _assert(layerClips, nodeVisibilities, errorBarClips, lineClips) {
693+
function _assert(layerClips, nodeDisplays, errorBarClips, lineClips) {
694694
var subplotLayer = d3.select('.plot');
695695
var scatterLayer = subplotLayer.select('.scatterlayer');
696696

697697
assertClip(subplotLayer, layerClips[0], 1, 'subplot layer');
698698
assertClip(subplotLayer.select('.barlayer'), layerClips[1], 1, 'bar layer');
699699
assertClip(scatterLayer, layerClips[2], 1, 'scatter layer');
700700

701-
assertNodeVisibility(
701+
assertNodeDisplay(
702702
scatterLayer.selectAll('.point'),
703-
nodeVisibilities,
703+
nodeDisplays,
704704
'scatter points'
705705
);
706-
assertNodeVisibility(
706+
assertNodeDisplay(
707707
scatterLayer.selectAll('.textpoint'),
708-
nodeVisibilities,
708+
nodeDisplays,
709709
'scatter text points'
710710
);
711711

@@ -779,7 +779,7 @@ describe('Test scatter *clipnaxis*', function() {
779779
.then(function() {
780780
_assert(
781781
[false, true, false],
782-
[null, null, 'hidden', 'hidden', 'hidden', 'hidden'],
782+
[null, null, 'none', 'none', 'none', 'none'],
783783
[true, 6],
784784
[true, 1]
785785
);
@@ -788,7 +788,7 @@ describe('Test scatter *clipnaxis*', function() {
788788
.then(function() {
789789
_assert(
790790
[false, true, false],
791-
['hidden', null, 'hidden', 'hidden', 'hidden', 'hidden'],
791+
['none', null, 'none', 'none', 'none', 'none'],
792792
[true, 6],
793793
[true, 1]
794794
);

‎test/jasmine/tests/scatterternary_test.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ var customMatchers = require('../assets/custom_matchers');
1111
var customAssertions = require('../assets/custom_assertions');
1212

1313
var assertClip = customAssertions.assertClip;
14-
var assertNodeVisibility = customAssertions.assertNodeVisibility;
14+
var assertNodeDisplay = customAssertions.assertNodeDisplay;
1515

1616
describe('scatterternary defaults', function() {
1717
'use strict';
@@ -386,21 +386,21 @@ describe('Test scatterternary *cliponaxis*', function() {
386386
var gd = createGraphDiv();
387387
var fig = Lib.extendDeep({}, require('@mocks/ternary_markers.json'));
388388

389-
function _assert(layerClips, nodeVisibilities, lineClips) {
389+
function _assert(layerClips, nodeDisplays, lineClips) {
390390
var frontLayer = d3.select('.frontplot');
391391
var scatterLayer = d3.select('.scatterlayer');
392392

393393
assertClip(frontLayer, layerClips[0], 1, 'front layer');
394394
assertClip(scatterLayer, layerClips[1], 1, 'scatter layer');
395395

396-
assertNodeVisibility(
396+
assertNodeDisplay(
397397
scatterLayer.selectAll('.point'),
398-
nodeVisibilities,
398+
nodeDisplays,
399399
'scatter points'
400400
);
401-
assertNodeVisibility(
401+
assertNodeDisplay(
402402
scatterLayer.selectAll('.textpoint'),
403-
nodeVisibilities,
403+
nodeDisplays,
404404
'scatter text points'
405405
);
406406

@@ -415,7 +415,7 @@ describe('Test scatterternary *cliponaxis*', function() {
415415
.then(function() {
416416
_assert(
417417
[false, false],
418-
[null, 'hidden', null, null, null, null, null, null, 'hidden', 'hidden', 'hidden'],
418+
[null, 'none', null, null, null, null, null, null, 'none', 'none', 'none'],
419419
[true, 1]
420420
);
421421
return Plotly.restyle(gd, 'visible', 'legendonly');
@@ -439,31 +439,31 @@ describe('Test scatterternary *cliponaxis*', function() {
439439
.then(function() {
440440
_assert(
441441
[false, false],
442-
[null, 'hidden', null, null, null, null, null, null, 'hidden', 'hidden', 'hidden'],
442+
[null, 'none', null, null, null, null, null, null, 'none', 'none', 'none'],
443443
[true, 1]
444444
);
445445
return Plotly.relayout(gd, 'ternary.aaxis.min', 20);
446446
})
447447
.then(function() {
448448
_assert(
449449
[false, false],
450-
[null, 'hidden', null, 'hidden', 'hidden', 'hidden', null, 'hidden', 'hidden', 'hidden', 'hidden'],
450+
[null, 'none', null, 'none', 'none', 'none', null, 'none', 'none', 'none', 'none'],
451451
[true, 1]
452452
);
453453
return Plotly.relayout(gd, 'ternary.baxis.min', 40);
454454
})
455455
.then(function() {
456456
_assert(
457457
[false, false],
458-
['hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', null, 'hidden', 'hidden', 'hidden', 'hidden'],
458+
['none', 'none', 'none', 'none', 'none', 'none', null, 'none', 'none', 'none', 'none'],
459459
[true, 1]
460460
);
461461
return Plotly.relayout(gd, 'ternary.caxis.min', 30);
462462
})
463463
.then(function() {
464464
_assert(
465465
[false, false],
466-
['hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden', 'hidden'],
466+
['none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none'],
467467
[true, 1]
468468
);
469469
return Plotly.relayout(gd, {

0 commit comments

Comments
 (0)