nv.models.scatter = function() {
"use strict";
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 0, right: 0, bottom: 0, left: 0}
, width = 960
, height = 500
, color = nv.utils.defaultColor() // chooses color
, id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't select one
, x = d3.scale.linear()
, y = d3.scale.linear()
, z = d3.scale.linear() //linear because d3.svg.shape.size is treated as area
, getX = function(d) { return d.x } // accessor to get the x value
, getY = function(d) { return d.y } // accessor to get the y value
, getSize = function(d) { return d.size || 1} // accessor to get the point size
, getShape = function(d) { return d.shape || 'circle' } // accessor to get point shape
, onlyCircles = true // Set to false to use shapes
, forceX = [] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
, forceY = [] // List of numbers to Force into the Y scale
, forceSize = [] // List of numbers to Force into the Size scale
, interactive = true // If true, plots a voronoi overlay for advanced point intersection
, pointKey = null
, pointActive = function(d) { return !d.notActive } // any points that return false will be filtered out
, padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
, padDataOuter = .1 //outerPadding to imitate ordinal scale outer padding
, clipEdge = false // if true, masks points within x and y scale
, clipVoronoi = true // if true, masks each point with a circle... can turn off to slightly increase performance
, clipRadius = function() { return 25 } // function to get the radius for voronoi point clips
, xDomain = null // Override x domain (skips the calculation from data)
, yDomain = null // Override y domain
, xRange = null // Override x range
, yRange = null // Override y range
, sizeDomain = null // Override point size domain
, sizeRange = null
, singlePoint = false
, dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
, useVoronoi = true
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var x0, y0, z0 // used to store previous scales
, timeoutID
, needsUpdate = false // Flag for when the points are visually updating, but the interactive layer is behind, to disable tooltips
;
//============================================================
function chart(selection) {
selection.each(function(data) {
var availableWidth = width - margin.left - margin.right,
availableHeight = height - margin.top - margin.bottom,
container = d3.select(this);
//add series index to each data point for reference
data.forEach(function(series, i) {
series.values.forEach(function(point) {
point.series = i;
});
});
//------------------------------------------------------------
// Setup Scales
// remap and flatten the data for use in calculating the scales' domains
var seriesData = (xDomain && yDomain && sizeDomain) ? [] : // if we know xDomain and yDomain and sizeDomain, no need to calculate.... if Size is constant remember to set sizeDomain to speed up performance
d3.merge(
data.map(function(d) {
return d.values.map(function(d,i) {
return { x: getX(d,i), y: getY(d,i), size: getSize(d,i) }
})
})
);
x .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x; }).concat(forceX)))
if (padData && data[0])
x.range(xRange || [(availableWidth * padDataOuter + availableWidth) / (2 *data[0].values.length), availableWidth - availableWidth * (1 + padDataOuter) / (2 * data[0].values.length) ]);
//x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
else
x.range(xRange || [0, availableWidth]);
y .domain(yDomain || d3.extent(seriesData.map(function(d) { return d.y }).concat(forceY)))
.range(yRange || [availableHeight, 0]);
z .domain(sizeDomain || d3.extent(seriesData.map(function(d) { return d.size }).concat(forceSize)))
.range(sizeRange || [16, 256]);
// If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
if (x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1]) singlePoint = true;
if (x.domain()[0] === x.domain()[1])
x.domain()[0] ?
x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
: x.domain([-1,1]);
if (y.domain()[0] === y.domain()[1])
y.domain()[0] ?
y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
: y.domain([-1,1]);
if ( isNaN(x.domain()[0])) {
x.domain([-1,1]);
}
if ( isNaN(y.domain()[0])) {
y.domain([-1,1]);
}
x0 = x0 || x;
y0 = y0 || y;
z0 = z0 || z;
//------------------------------------------------------------
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-wrap.nv-scatter').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatter nv-chart-' + id + (singlePoint ? ' nv-single-point' : ''));
var defsEnter = wrapEnter.append('defs');
var gEnter = wrapEnter.append('g');
var g = wrap.select('g');
gEnter.append('g').attr('class', 'nv-groups');
gEnter.append('g').attr('class', 'nv-point-paths');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//------------------------------------------------------------
defsEnter.append('clipPath')
.attr('id', 'nv-edge-clip-' + id)
.append('rect');
wrap.select('#nv-edge-clip-' + id + ' rect')
.attr('width', availableWidth)
.attr('height', (availableHeight > 0) ? availableHeight : 0);
g .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
function updateInteractiveLayer() {
if (!interactive) return false;
var eventElements;
var vertices = d3.merge(data.map(function(group, groupIndex) {
return group.values
.map(function(point, pointIndex) {
// *Adding noise to make duplicates very unlikely
// *Injecting series and point index for reference
/* *Adding a 'jitter' to the points, because there's an issue in d3.geom.voronoi.
*/
var pX = getX(point,pointIndex);
var pY = getY(point,pointIndex);
return [x(pX)+ Math.random() * 1e-7,
y(pY)+ Math.random() * 1e-7,
groupIndex,
pointIndex, point]; //temp hack to add noise untill I think of a better way so there are no duplicates
})
.filter(function(pointArray, pointIndex) {
return pointActive(pointArray[4], pointIndex); // Issue #237.. move filter to after map, so pointIndex is correct!
})
})
);
//inject series and point index for reference into voronoi
if (useVoronoi === true) {
if (clipVoronoi) {
var pointClipsEnter = wrap.select('defs').selectAll('.nv-point-clips')
.data([id])
.enter();
pointClipsEnter.append('clipPath')
.attr('class', 'nv-point-clips')
.attr('id', 'nv-points-clip-' + id);
var pointClips = wrap.select('#nv-points-clip-' + id).selectAll('circle')
.data(vertices);
pointClips.enter().append('circle')
.attr('r', clipRadius);
pointClips.exit().remove();
pointClips
.attr('cx', function(d) { return d[0] })
.attr('cy', function(d) { return d[1] });
wrap.select('.nv-point-paths')
.attr('clip-path', 'url(#nv-points-clip-' + id + ')');
}
if(vertices.length) {
// Issue #283 - Adding 2 dummy points to the voronoi b/c voronoi requires min 3 points to work
vertices.push([x.range()[0] - 20, y.range()[0] - 20, null, null]);
vertices.push([x.range()[1] + 20, y.range()[1] + 20, null, null]);
vertices.push([x.range()[0] - 20, y.range()[0] + 20, null, null]);
vertices.push([x.range()[1] + 20, y.range()[1] - 20, null, null]);
}
var bounds = d3.geom.polygon([
[-10,-10],
[-10,height + 10],
[width + 10,height + 10],
[width + 10,-10]
]);
var voronoi = d3.geom.voronoi(vertices).map(function(d, i) {
return {
'data': bounds.clip(d),
'series': vertices[i][2],
'point': vertices[i][3]
}
});
var pointPaths = wrap.select('.nv-point-paths').selectAll('path')
.data(voronoi);
pointPaths.enter().append('path')
.attr('class', function(d,i) { return 'nv-path-'+i; });
pointPaths.exit().remove();
pointPaths
.attr('d', function(d) {
if (d.data.length === 0)
return 'M 0 0'
else
return 'M' + d.data.join('L') + 'Z';
});
var mouseEventCallback = function(d,mDispatch) {
if (needsUpdate) return 0;
var series = data[d.series];
if (typeof series === 'undefined') return;
var point = series.values[d.point];
mDispatch({
point: point,
series: series,
pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
seriesIndex: d.series,
pointIndex: d.point
});
};
pointPaths
.on('click', function(d) {
mouseEventCallback(d, dispatch.elementClick);
})
.on('mouseover', function(d) {
mouseEventCallback(d, dispatch.elementMouseover);
})
.on('mouseout', function(d, i) {
mouseEventCallback(d, dispatch.elementMouseout);
});
} else {
/*
// bring data in form needed for click handlers
var dataWithPoints = vertices.map(function(d, i) {
return {
'data': d,
'series': vertices[i][2],
'point': vertices[i][3]
}
});
*/
// add event handlers to points instead voronoi paths
wrap.select('.nv-groups').selectAll('.nv-group')
.selectAll('.nv-point')
//.data(dataWithPoints)
//.style('pointer-events', 'auto') // recativate events, disabled by css
.on('click', function(d,i) {
//nv.log('test', d, i);
if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
var series = data[d.series],
point = series.values[i];
dispatch.elementClick({
point: point,
series: series,
pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
seriesIndex: d.series,
pointIndex: i
});
})
.on('mouseover', function(d,i) {
if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
var series = data[d.series],
point = series.values[i];
dispatch.elementMouseover({
point: point,
series: series,
pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
seriesIndex: d.series,
pointIndex: i
});
})
.on('mouseout', function(d,i) {
if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
var series = data[d.series],
point = series.values[i];
dispatch.elementMouseout({
point: point,
series: series,
seriesIndex: d.series,
pointIndex: i
});
});
}
needsUpdate = false;
}
needsUpdate = true;
var groups = wrap.select('.nv-groups').selectAll('.nv-group')
.data(function(d) { return d }, function(d) { return d.key });
groups.enter().append('g')
.style('stroke-opacity', 1e-6)
.style('fill-opacity', 1e-6);
groups.exit()
.remove();
groups
.attr('class', function(d,i) { return 'nv-group nv-series-' + i })
.classed('hover', function(d) { return d.hover });
groups
.transition()
.style('fill', function(d,i) { return color(d, i) })
.style('stroke', function(d,i) { return color(d, i) })
.style('stroke-opacity', 1)
.style('fill-opacity', .5);
if (onlyCircles) {
var points = groups.selectAll('circle.nv-point')
.data(function(d) { return d.values }, pointKey);
points.enter().append('circle')
.style('fill', function (d,i) { return d.color })
.style('stroke', function (d,i) { return d.color })
.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 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)
.classed('nv-point', true)
.classed('nv-point-' + i, true)
.classed('hover',false)
;
});
points.transition()
.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 {
var points = groups.selectAll('path.nv-point')
.data(function(d) { return d.values });
points.enter().append('path')
.style('fill', function (d,i) { return d.color })
.style('stroke', function (d,i) { return d.color })
.attr('transform', function(d,i) {
return 'translate(' + x0(getX(d,i)) + ',' + y0(getY(d,i)) + ')'
})
.attr('d',
d3.svg.symbol()
.type(getShape)
.size(function(d,i) { return z(getSize(d,i)) })
);
points.exit().remove();
groups.exit().selectAll('path.nv-point')
.transition()
.attr('transform', function(d,i) {
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
})
.remove();
points.each(function(d,i) {
d3.select(this)
.classed('nv-point', true)
.classed('nv-point-' + i, true)
.classed('hover',false)
;
});
points.transition()
.attr('transform', function(d,i) {
//nv.log(d,i,getX(d,i), x(getX(d,i)));
return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
})
.attr('d',
d3.svg.symbol()
.type(getShape)
.size(function(d,i) { return z(getSize(d,i)) })
);
}
// Delay updating the invisible interactive layer for smoother animation
clearTimeout(timeoutID); // stop repeat calls to updateInteractiveLayer
timeoutID = setTimeout(updateInteractiveLayer, 300);
//updateInteractiveLayer();
//store old scales for use in transitions on update
x0 = x.copy();
y0 = y.copy();
z0 = z.copy();
});
return chart;
}
//============================================================
// Event Handling/Dispatching (out of chart's scope)
//------------------------------------------------------------
chart.clearHighlights = function() {
//Remove the 'hover' class from all highlighted points.
d3.selectAll(".nv-chart-" + id + " .nv-point.hover").classed("hover",false);
};
chart.highlightPoint = function(seriesIndex,pointIndex,isHoverOver) {
d3.select(".nv-chart-" + id + " .nv-series-" + seriesIndex + " .nv-point-" + pointIndex)
.classed("hover",isHoverOver);
};
dispatch.on('elementMouseover.point', function(d) {
if (interactive) chart.highlightPoint(d.seriesIndex,d.pointIndex,true);
});
dispatch.on('elementMouseout.point', function(d) {
if (interactive) chart.highlightPoint(d.seriesIndex,d.pointIndex,false);
});
//============================================================
//============================================================
// Expose Public Variables
//------------------------------------------------------------
chart.dispatch = dispatch;
chart.options = nv.utils.optionsFunc.bind(chart);
chart.x = function(_) {
if (!arguments.length) return getX;
getX = d3.functor(_);
return chart;
};
chart.y = function(_) {
if (!arguments.length) return getY;
getY = d3.functor(_);
return chart;
};
chart.size = function(_) {
if (!arguments.length) return getSize;
getSize = d3.functor(_);
return chart;
};
chart.margin = function(_) {
if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.xScale = function(_) {
if (!arguments.length) return x;
x = _;
return chart;
};
chart.yScale = function(_) {
if (!arguments.length) return y;
y = _;
return chart;
};
chart.zScale = function(_) {
if (!arguments.length) return z;
z = _;
return chart;
};
chart.xDomain = function(_) {
if (!arguments.length) return xDomain;
xDomain = _;
return chart;
};
chart.yDomain = function(_) {
if (!arguments.length) return yDomain;
yDomain = _;
return chart;
};
chart.sizeDomain = function(_) {
if (!arguments.length) return sizeDomain;
sizeDomain = _;
return chart;
};
chart.xRange = function(_) {
if (!arguments.length) return xRange;
xRange = _;
return chart;
};
chart.yRange = function(_) {
if (!arguments.length) return yRange;
yRange = _;
return chart;
};
chart.sizeRange = function(_) {
if (!arguments.length) return sizeRange;
sizeRange = _;
return chart;
};
chart.forceX = function(_) {
if (!arguments.length) return forceX;
forceX = _;
return chart;
};
chart.forceY = function(_) {
if (!arguments.length) return forceY;
forceY = _;
return chart;
};
chart.forceSize = function(_) {
if (!arguments.length) return forceSize;
forceSize = _;
return chart;
};
chart.interactive = function(_) {
if (!arguments.length) return interactive;
interactive = _;
return chart;
};
chart.pointKey = function(_) {
if (!arguments.length) return pointKey;
pointKey = _;
return chart;
};
chart.pointActive = function(_) {
if (!arguments.length) return pointActive;
pointActive = _;
return chart;
};
chart.padData = function(_) {
if (!arguments.length) return padData;
padData = _;
return chart;
};
chart.padDataOuter = function(_) {
if (!arguments.length) return padDataOuter;
padDataOuter = _;
return chart;
};
chart.clipEdge = function(_) {
if (!arguments.length) return clipEdge;
clipEdge = _;
return chart;
};
chart.clipVoronoi= function(_) {
if (!arguments.length) return clipVoronoi;
clipVoronoi = _;
return chart;
};
chart.useVoronoi= function(_) {
if (!arguments.length) return useVoronoi;
useVoronoi = _;
if (useVoronoi === false) {
clipVoronoi = false;
}
return chart;
};
chart.clipRadius = function(_) {
if (!arguments.length) return clipRadius;
clipRadius = _;
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = nv.utils.getColor(_);
return chart;
};
chart.shape = function(_) {
if (!arguments.length) return getShape;
getShape = _;
return chart;
};
chart.onlyCircles = function(_) {
if (!arguments.length) return onlyCircles;
onlyCircles = _;
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
chart.singlePoint = function(_) {
if (!arguments.length) return singlePoint;
singlePoint = _;
return chart;
};
//============================================================
return chart;
}