blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding unit test on lineChartTest.html for when points are NaN, undefined,

Browse Source 
etc.
Found a few edge cases where errors happen. Creating nv.utils.NaNtoZero()
function, to be used in places where points and lines are rendered.

Using NantoZero in scatter.js and interactiveGuideline.
master
Robin Hu 11 years ago
parent 9b3858e926
commit 28d708d09d
5 changed files with 59 additions and 21 deletions
Show Stats Download Patch File Download Diff File

2
src/interactiveLayer.js
Unescape Escape View File

@ -67,7 +67,7 @@ nv.interactiveGuideline = function() {
if (!showGuideLine) return;
var line = wrap.select(".nv-interactiveGuideLine")
.selectAll("line")
.data((x != null) ? [x] : [], String);
.data((x != null) ? [nv.utils.NaNtoZero(x)] : [], String);
line.enter()
.append("line")

24
src/models/line.js
Unescape Escape View File

@ -131,8 +131,8 @@ nv.models.line = function() {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y0(function(d,i) { return y0(getY(d,i)) })
.x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
.y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
.y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
@ -142,8 +142,8 @@ nv.models.line = function() {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y0(function(d,i) { return y(getY(d,i)) })
.x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
.y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
.y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
@ -153,8 +153,8 @@ nv.models.line = function() {
return d3.svg.area()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y0(function(d,i) { return y(getY(d,i)) })
.x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
.y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
.y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
//.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
.apply(this, [d.values])
@ -170,24 +170,24 @@ nv.models.line = function() {
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x0(getX(d,i)) })
.y(function(d,i) { return y0(getY(d,i)) })
.x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
.y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
);
d3.transition(groups.exit().selectAll('path.nv-line'))
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
.x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
.y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
);
d3.transition(linePaths)
.attr('d',
d3.svg.line()
.interpolate(interpolate)
.defined(defined)
.x(function(d,i) { return x(getX(d,i)) })
.y(function(d,i) { return y(getY(d,i)) })
.x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
.y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
);

18
src/models/scatter.js
Unescape Escape View File

@ -245,8 +245,10 @@ nv.models.scatter = function() {
var mouseEventCallback = function(d,mDispatch) {
if (needsUpdate) return 0;
var series = data[d.series],
point = series.values[d.point];
var series = data[d.series];
if (typeof series === 'undefined') return;
var point = series.values[d.point];
mDispatch({
point: point,
@ -356,13 +358,13 @@ nv.models.scatter = function() {
var points = groups.selectAll('circle.nv-point')
.data(function(d) { return d.values }, pointKey);
points.enter().append('circle')
.attr('cx', function(d,i) { return x0(getX(d,i)) })
.attr('cy', function(d,i) { return y0(getY(d,i)) })
.attr('cx', function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
.attr('cy', function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
.attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
points.exit().remove();
groups.exit().selectAll('path.nv-point').transition()
.attr('cx', function(d,i) { return x(getX(d,i)) })
.attr('cy', function(d,i) { return y(getY(d,i)) })
.attr('cx', function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
.attr('cy', function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
.remove();
points.each(function(d,i) {
d3.select(this)
@ -370,8 +372,8 @@ nv.models.scatter = function() {
.classed('nv-point-' + i, true);
});
points.transition()
.attr('cx', function(d,i) { return x(getX(d,i)) })
.attr('cy', function(d,i) { return y(getY(d,i)) })
.attr('cx', function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
.attr('cy', function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
.attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
} else {

11
src/utils.js
Unescape Escape View File

@ -116,3 +116,14 @@ nv.utils.calcApproxTextWidth = function (svgTextElem) {
}
return 0;
};
/* Numbers that are undefined, null or NaN, convert them to zeros.
*/
nv.utils.NaNtoZero = function(n) {
if (typeof n !== 'number'
|| isNaN(n)
|| n === null
|| n === Infinity) return 0;
return n;
};

25
test/lineChartTest.html
Unescape Escape View File

@ -56,6 +56,11 @@
<svg></svg>
</div>
<div class='chart third' id='chart13'>
What if there are null, Infinity and NaN values in points?
<svg></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
@ -112,6 +117,7 @@ defaultChartConfig("chart9", fibonacci());
defaultChartConfig("chart10", lotsofSeries());
defaultChartConfig("chart11", backwards(),false);
defaultChartConfig("chart12", duplicateX(),false);
defaultChartConfig("chart13", withNaNs());
function defaultChartConfig(containerid, data, guideline, useDates) {
@ -315,4 +321,23 @@ function duplicateX() {
}
];
}
function withNaNs() {
return [
{key: "NaN Points",
values: [
{x: 1, y: NaN},
{x: 2, y: undefined},
{x: 3, y: false},
{x: 4, y: null},
{x: 5, y: "Hello"},
{x: NaN, y: NaN},
{x: null, y: null},
{x: undefined, y: undefined},
{x: "Hello", y: "World"},
{x: Infinity, y: Infinity}
]
}
]
}
</script>

Write Preview
Loading…
Cancel
Save