nv.models.scatterFisheyeChart = function() { var margin = {top: 30, right: 20, bottom: 50, left: 60}, width = null, height = null, color = nv.utils.defaultColor(), showDistX = false, showDistY = false, showLegend = true, showControls = true, fisheye = 0, tooltips = true, tooltipX = function(key, x, y) { return '' + x + '' }, tooltipY = function(key, x, y) { return '' + y + '' }, tooltip = function(key, x, y, e, graph) { return '

' + key + '

' + '

' + y + ' at ' + x + '

' }, noData = "No Data Available." ; var x = d3.fisheye.scale(d3.scale.linear).distortion(0), y = d3.fisheye.scale(d3.scale.linear).distortion(0); var scatter = nv.models.scatter().xScale(x).yScale(y), //x = scatter.xScale(), //y = scatter.yScale(), xAxis = nv.models.axis().orient('bottom').scale(x).tickPadding(10), yAxis = nv.models.axis().orient('left').scale(y).tickPadding(10), legend = nv.models.legend().height(30), controls = nv.models.legend().height(30), dispatch = d3.dispatch('tooltipShow', 'tooltipHide'), x0, y0; //TODO: abstract distribution component and have old scales stored there var showTooltip = function(e, offsetElement) { //TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?) //var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ), //top = e.pos[1] + ( offsetElement.offsetTop || 0), var leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ), topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0), leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ), topY = e.pos[1] + ( offsetElement.offsetTop || 0), xVal = xAxis.tickFormat()(scatter.x()(e.point, e.pointIndex)), yVal = yAxis.tickFormat()(scatter.y()(e.point, e.pointIndex)), contentX = tooltipX(e.series.key, xVal, yVal, e, chart), contentY = tooltipY(e.series.key, xVal, yVal, e, chart); //content = tooltip(e.series.key, xVal, yVal, e, chart); nv.tooltip.show([leftX, topX], contentX, 'n', 1, offsetElement); nv.tooltip.show([leftY, topY], contentY, 'e', 1, offsetElement); //nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's'); }; var controlsData = [ { key: 'Magnify', disabled: true } ]; function chart(selection) { selection.each(function(data) { var container = d3.select(this), that = this; //TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection) chart.update = function() { selection.transition().call(chart) }; var availableWidth = (width || parseInt(container.style('width')) || 960) - margin.left - margin.right, availableHeight = (height || parseInt(container.style('height')) || 400) - margin.top - margin.bottom; //------------------------------------------------------------ // Display No Data message if there's nothing to show. if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) { container.append('text') .attr('class', 'nvd3 nv-noData') .attr('x', availableWidth / 2) .attr('y', availableHeight / 2) .attr('dy', '-.7em') .style('text-anchor', 'middle') .text(noData); return chart; } else { container.select('.nv-noData').remove(); } //------------------------------------------------------------ x0 = x0 || scatter.xScale(); y0 = y0 || scatter.yScale(); var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]); var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id()).append('g'); gEnter.append('rect') .attr('class', 'nvd3 nv-background') .attr('width', availableWidth) .attr('height', availableHeight); gEnter.append('g').attr('class', 'nv-legendWrap'); gEnter.append('g').attr('class', 'nv-x nv-axis'); gEnter.append('g').attr('class', 'nv-y nv-axis'); gEnter.append('g').attr('class', 'nv-scatterWrap'); gEnter.append('g').attr('class', 'nv-controlsWrap'); //gEnter.append('g').attr('class', 'nv-distWrap'); var g = wrap.select('g') if (showLegend) { legend.width( availableWidth / 2 ); wrap.select('.nv-legendWrap') .datum(data) .call(legend); if ( margin.top != legend.height()) { margin.top = legend.height(); availableHeight = (height || parseInt(container.style('height')) || 400) - margin.top - margin.bottom; } wrap.select('.nv-legendWrap') .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')'); } scatter .width(availableWidth) .height(availableHeight) .color(data.map(function(d,i) { return d.color || color(d, i); }).filter(function(d,i) { return !data[i].disabled })) if (showControls) { controls.width(180).color(['#444']); g.select('.nv-controlsWrap') .datum(controlsData) .attr('transform', 'translate(0,' + (-margin.top) +')') .call(controls); } g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); var scatterWrap = wrap.select('.nv-scatterWrap') .datum(data.filter(function(d) { return !d.disabled })); d3.transition(scatterWrap).call(scatter); xAxis .ticks( availableWidth / 100 ) .tickSize( -availableHeight , 0); g.select('.nv-x.nv-axis') .attr('transform', 'translate(0,' + y.range()[0] + ')'); d3.transition(g.select('.nv-x.nv-axis')) .call(xAxis); yAxis .ticks( availableHeight / 36 ) .tickSize( -availableWidth, 0); d3.transition(g.select('.nv-y.nv-axis')) .call(yAxis); //TODO abstract Distribution into its own component if ( showDistX || showDistY) { var distWrap = scatterWrap.selectAll('g.nv-distribution') .data(function(d) { return d }, function(d) { return d.key }); distWrap.enter().append('g').attr('class', function(d,i) { return 'nv-distribution nv-series-' + i }) distWrap.style('stroke', function(d,i) { return color.filter(function(d,i) { return data[i] && !data[i].disabled })[i % color.length] }) } if (showDistX) { var distX = distWrap.selectAll('line.nv-distX') .data(function(d) { return d.values }) distX.enter().append('line') .attr('x1', function(d,i) { return x0(scatter.x()(d,i)) }) .attr('x2', function(d,i) { return x0(scatter.x()(d,i)) }) //d3.transition(distX.exit()) d3.transition(distWrap.exit().selectAll('line.nv-distX')) .attr('x1', function(d,i) { return x(scatter.x()(d,i)) }) .attr('x2', function(d,i) { return x(scatter.x()(d,i)) }) .remove(); distX .attr('class', function(d,i) { return 'nv-distX nv-distX-' + i }) .attr('y1', y.range()[0]) .attr('y2', y.range()[0] + 8); d3.transition(distX) .attr('x1', function(d,i) { return x(scatter.x()(d,i)) }) .attr('x2', function(d,i) { return x(scatter.x()(d,i)) }) } if (showDistY) { var distY = distWrap.selectAll('line.nv-distY') .data(function(d) { return d.values }) distY.enter().append('line') .attr('y1', function(d,i) { return y0(scatter.y()(d,i)) }) .attr('y2', function(d,i) { return y0(scatter.y()(d,i)) }); //d3.transition(distY.exit()) d3.transition(distWrap.exit().selectAll('line.nv-distY')) .attr('y1', function(d,i) { return y(scatter.y()(d,i)) }) .attr('y2', function(d,i) { return y(scatter.y()(d,i)) }) .remove(); distY .attr('class', function(d,i) { return 'nv-distY nv-distY-' + i }) .attr('x1', x.range()[0]) .attr('x2', x.range()[0] - 8) d3.transition(distY) .attr('y1', function(d,i) { return y(scatter.y()(d,i)) }) .attr('y2', function(d,i) { return y(scatter.y()(d,i)) }); } legend.dispatch.on('legendClick', function(d,i, that) { d.disabled = !d.disabled; if (!data.filter(function(d) { return !d.disabled }).length) { data.map(function(d) { d.disabled = false; wrap.selectAll('.nv-series').classed('disabled', false); return d; }); } selection.transition().call(chart) }); controls.dispatch.on('legendClick', function(d,i) { d.disabled = !d.disabled; fisheye = d.disabled ? 0 : 2.5; g.select('.nv-background').style('pointer-events', d.disabled ? 'none' : 'all'); scatter.interactive(d.disabled); tooltips = d.disabled; if (d.disabled) { x.distortion(fisheye).focus(0); y.distortion(fisheye).focus(0); scatterWrap.call(scatter); g.select('.nv-x.nv-axis').call(xAxis); g.select('.nv-y.nv-axis').call(yAxis); } selection.transition().call(chart); }); /* legend.dispatch.on('legendMouseover', function(d, i) { d.hover = true; selection.transition().call(chart) }); legend.dispatch.on('legendMouseout', function(d, i) { d.hover = false; selection.transition().call(chart) }); */ scatter.dispatch.on('elementMouseover.tooltip', function(e) { //scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex) d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distX-' + e.pointIndex) .attr('y1', e.pos[1]); //scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex) d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distY-' + e.pointIndex) .attr('x1', e.pos[0]); e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top]; dispatch.tooltipShow(e); }); //if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, container[0][0].parentNode) } ); // TODO: maybe merge with above? dispatch.on('tooltipShow', function(e) { if (tooltips) showTooltip(e, that.parentNode); }); scatter.dispatch.on('elementMouseout.tooltip', function(e) { dispatch.tooltipHide(e); //scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex) d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distX-' + e.pointIndex) .attr('y1', y.range()[0]); //scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex) d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distY-' + e.pointIndex) .attr('x1', x.range()[0]); }); dispatch.on('tooltipHide', nv.tooltip.cleanup); //TODO: get distributions to work with fisheye g.select('.nv-background').on('mousemove', updateFisheye); g.select('.nv-point-paths').on('mousemove', updateFisheye); function updateFisheye() { var mouse = d3.mouse(this); x.distortion(fisheye).focus(mouse[0]); y.distortion(fisheye).focus(mouse[1]); scatterWrap.call(scatter); g.select('.nv-x.nv-axis').call(xAxis); g.select('.nv-y.nv-axis').call(yAxis); } //store old scales for use in transitions on update, to animate from old to new positions, and sizes x0 = x.copy(); y0 = y.copy(); }); return chart; } chart.dispatch = dispatch; chart.legend = legend; chart.xAxis = xAxis; chart.yAxis = yAxis; d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'fisheye', 'fisheyeRadius'); chart.margin = function(_) { if (!arguments.length) return margin; margin = _; 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.color = function(_) { if (!arguments.length) return color; color = nv.utils.getColor(_); legend.color(color); return chart; }; chart.showDistX = function(_) { if (!arguments.length) return showDistX; showDistX = _; return chart; }; chart.showDistY = function(_) { if (!arguments.length) return showDistY; showDistY = _; return chart; }; chart.showControls = function(_) { if (!arguments.length) return showControls; showControls = _; return chart; }; chart.showLegend = function(_) { if (!arguments.length) return showLegend; showLegend = _; return chart; }; chart.fisheye = function(_) { if (!arguments.length) return fisheye; fisheye = _; return chart; }; chart.tooltips = function(_) { if (!arguments.length) return tooltips; tooltips = _; return chart; }; chart.tooltipContent = function(_) { if (!arguments.length) return tooltip; tooltip = _; return chart; }; chart.noData = function(_) { if (!arguments.length) return noData; noData = _; return chart; }; return chart; }