| |
| nv.models.scatterPlusLineChart = function() { |
| "use strict"; |
| //============================================================ |
| // Public Variables with Default Settings |
| //------------------------------------------------------------ |
| |
| var scatter = nv.models.scatter() |
| , xAxis = nv.models.axis() |
| , yAxis = nv.models.axis() |
| , legend = nv.models.legend() |
| , controls = nv.models.legend() |
| , distX = nv.models.distribution() |
| , distY = nv.models.distribution() |
| ; |
| |
| var margin = {top: 30, right: 20, bottom: 50, left: 75} |
| , width = null |
| , height = null |
| , color = nv.utils.defaultColor() |
| , x = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale() |
| , y = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale() |
| , showDistX = false |
| , showDistY = false |
| , showLegend = true |
| , showXAxis = true |
| , showYAxis = true |
| , rightAlignYAxis = false |
| , showControls = !!d3.fisheye |
| , fisheye = 0 |
| , pauseFisheye = false |
| , tooltips = true |
| , tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' } |
| , tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' } |
| , tooltip = function(key, x, y, date) { return '<h3>' + key + '</h3>' |
| + '<p>' + date + '</p>' } |
| , state = {} |
| , defaultState = null |
| , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState') |
| , noData = "No Data Available." |
| , transitionDuration = 250 |
| ; |
| |
| scatter |
| .xScale(x) |
| .yScale(y) |
| ; |
| xAxis |
| .orient('bottom') |
| .tickPadding(10) |
| ; |
| yAxis |
| .orient((rightAlignYAxis) ? 'right' : 'left') |
| .tickPadding(10) |
| ; |
| distX |
| .axis('x') |
| ; |
| distY |
| .axis('y') |
| ; |
| |
| controls.updateState(false); |
| //============================================================ |
| |
| |
| //============================================================ |
| // Private Variables |
| //------------------------------------------------------------ |
| |
| var x0, y0; |
| |
| 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), |
| 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)); |
| |
| if( tooltipX != null ) |
| nv.tooltip.show([leftX, topX], tooltipX(e.series.key, xVal, yVal, e, chart), 'n', 1, offsetElement, 'x-nvtooltip'); |
| if( tooltipY != null ) |
| nv.tooltip.show([leftY, topY], tooltipY(e.series.key, xVal, yVal, e, chart), 'e', 1, offsetElement, 'y-nvtooltip'); |
| if( tooltip != null ) |
| nv.tooltip.show([left, top], tooltip(e.series.key, xVal, yVal, e.point.tooltip, e, chart), e.value < 0 ? 'n' : 's', null, offsetElement); |
| }; |
| |
| var controlsData = [ |
| { key: 'Magnify', disabled: true } |
| ]; |
| |
| //============================================================ |
| |
| |
| function chart(selection) { |
| selection.each(function(data) { |
| var container = d3.select(this), |
| that = this; |
| |
| var availableWidth = (width || parseInt(container.style('width')) || 960) |
| - margin.left - margin.right, |
| availableHeight = (height || parseInt(container.style('height')) || 400) |
| - margin.top - margin.bottom; |
| |
| chart.update = function() { container.transition().duration(transitionDuration).call(chart); }; |
| chart.container = this; |
| |
| //set state.disabled |
| state.disabled = data.map(function(d) { return !!d.disabled }); |
| |
| if (!defaultState) { |
| var key; |
| defaultState = {}; |
| for (key in state) { |
| if (state[key] instanceof Array) |
| defaultState[key] = state[key].slice(0); |
| else |
| defaultState[key] = state[key]; |
| } |
| } |
| |
| //------------------------------------------------------------ |
| // Display noData message if there's nothing to show. |
| |
| if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) { |
| var noDataText = container.selectAll('.nv-noData').data([noData]); |
| |
| noDataText.enter().append('text') |
| .attr('class', 'nvd3 nv-noData') |
| .attr('dy', '-.7em') |
| .style('text-anchor', 'middle'); |
| |
| noDataText |
| .attr('x', margin.left + availableWidth / 2) |
| .attr('y', margin.top + availableHeight / 2) |
| .text(function(d) { return d }); |
| |
| return chart; |
| } else { |
| container.selectAll('.nv-noData').remove(); |
| } |
| |
| //------------------------------------------------------------ |
| |
| |
| //------------------------------------------------------------ |
| // Setup Scales |
| |
| x = scatter.xScale(); |
| y = scatter.yScale(); |
| |
| x0 = x0 || x; |
| y0 = y0 || y; |
| |
| //------------------------------------------------------------ |
| |
| |
| //------------------------------------------------------------ |
| // Setup containers and skeleton of chart |
| |
| var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]); |
| var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id()); |
| var gEnter = wrapEnter.append('g'); |
| var g = wrap.select('g') |
| |
| // background for pointer events |
| gEnter.append('rect').attr('class', 'nvd3 nv-background').style("pointer-events","none"); |
| |
| 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-regressionLinesWrap'); |
| gEnter.append('g').attr('class', 'nv-distWrap'); |
| gEnter.append('g').attr('class', 'nv-legendWrap'); |
| gEnter.append('g').attr('class', 'nv-controlsWrap'); |
| |
| wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); |
| |
| if (rightAlignYAxis) { |
| g.select(".nv-y.nv-axis") |
| .attr("transform", "translate(" + availableWidth + ",0)"); |
| } |
| |
| //------------------------------------------------------------ |
| |
| |
| //------------------------------------------------------------ |
| // Legend |
| |
| 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) +')'); |
| } |
| |
| //------------------------------------------------------------ |
| |
| |
| //------------------------------------------------------------ |
| // Controls |
| |
| if (showControls) { |
| controls.width(180).color(['#444']); |
| g.select('.nv-controlsWrap') |
| .datum(controlsData) |
| .attr('transform', 'translate(0,' + (-margin.top) +')') |
| .call(controls); |
| } |
| |
| //------------------------------------------------------------ |
| |
| |
| //------------------------------------------------------------ |
| // Main Chart Component(s) |
| |
| 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 })) |
| |
| wrap.select('.nv-scatterWrap') |
| .datum(data.filter(function(d) { return !d.disabled })) |
| .call(scatter); |
| |
| wrap.select('.nv-regressionLinesWrap') |
| .attr('clip-path', 'url(#nv-edge-clip-' + scatter.id() + ')'); |
| |
| var regWrap = wrap.select('.nv-regressionLinesWrap').selectAll('.nv-regLines') |
| .data(function(d) {return d }); |
| |
| regWrap.enter().append('g').attr('class', 'nv-regLines'); |
| |
| var regLine = regWrap.selectAll('.nv-regLine').data(function(d){return [d]}); |
| var regLineEnter = regLine.enter() |
| .append('line').attr('class', 'nv-regLine') |
| .style('stroke-opacity', 0); |
| |
| regLine |
| .transition() |
| .attr('x1', x.range()[0]) |
| .attr('x2', x.range()[1]) |
| .attr('y1', function(d,i) {return y(x.domain()[0] * d.slope + d.intercept) }) |
| .attr('y2', function(d,i) { return y(x.domain()[1] * d.slope + d.intercept) }) |
| .style('stroke', function(d,i,j) { return color(d,j) }) |
| .style('stroke-opacity', function(d,i) { |
| return (d.disabled || typeof d.slope === 'undefined' || typeof d.intercept === 'undefined') ? 0 : 1 |
| }); |
| |
| //------------------------------------------------------------ |
| |
| |
| //------------------------------------------------------------ |
| // Setup Axes |
| |
| if (showXAxis) { |
| xAxis |
| .scale(x) |
| .ticks( xAxis.ticks() ? xAxis.ticks() : availableWidth / 100 ) |
| .tickSize( -availableHeight , 0); |
| |
| g.select('.nv-x.nv-axis') |
| .attr('transform', 'translate(0,' + y.range()[0] + ')') |
| .call(xAxis); |
| } |
| |
| if (showYAxis) { |
| yAxis |
| .scale(y) |
| .ticks( yAxis.ticks() ? yAxis.ticks() : availableHeight / 36 ) |
| .tickSize( -availableWidth, 0); |
| |
| g.select('.nv-y.nv-axis') |
| .call(yAxis); |
| } |
| |
| |
| if (showDistX) { |
| distX |
| .getData(scatter.x()) |
| .scale(x) |
| .width(availableWidth) |
| .color(data.map(function(d,i) { |
| return d.color || color(d, i); |
| }).filter(function(d,i) { return !data[i].disabled })); |
| gEnter.select('.nv-distWrap').append('g') |
| .attr('class', 'nv-distributionX'); |
| g.select('.nv-distributionX') |
| .attr('transform', 'translate(0,' + y.range()[0] + ')') |
| .datum(data.filter(function(d) { return !d.disabled })) |
| .call(distX); |
| } |
| |
| if (showDistY) { |
| distY |
| .getData(scatter.y()) |
| .scale(y) |
| .width(availableHeight) |
| .color(data.map(function(d,i) { |
| return d.color || color(d, i); |
| }).filter(function(d,i) { return !data[i].disabled })); |
| gEnter.select('.nv-distWrap').append('g') |
| .attr('class', 'nv-distributionY'); |
| g.select('.nv-distributionY') |
| .attr('transform', 'translate(' + (rightAlignYAxis ? availableWidth : -distY.size() ) + ',0)') |
| .datum(data.filter(function(d) { return !d.disabled })) |
| .call(distY); |
| } |
| |
| //------------------------------------------------------------ |
| |
| |
| |
| |
| if (d3.fisheye) { |
| g.select('.nv-background') |
| .attr('width', availableWidth) |
| .attr('height', availableHeight) |
| ; |
| |
| g.select('.nv-background').on('mousemove', updateFisheye); |
| g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;}); |
| scatter.dispatch.on('elementClick.freezeFisheye', function() { |
| pauseFisheye = !pauseFisheye; |
| }); |
| } |
| |
| |
| function updateFisheye() { |
| if (pauseFisheye) { |
| g.select('.nv-point-paths').style('pointer-events', 'all'); |
| return false; |
| } |
| |
| g.select('.nv-point-paths').style('pointer-events', 'none' ); |
| |
| var mouse = d3.mouse(this); |
| x.distortion(fisheye).focus(mouse[0]); |
| y.distortion(fisheye).focus(mouse[1]); |
| |
| g.select('.nv-scatterWrap') |
| .datum(data.filter(function(d) { return !d.disabled })) |
| .call(scatter); |
| |
| if (showXAxis) |
| g.select('.nv-x.nv-axis').call(xAxis); |
| |
| if (showYAxis) |
| g.select('.nv-y.nv-axis').call(yAxis); |
| |
| g.select('.nv-distributionX') |
| .datum(data.filter(function(d) { return !d.disabled })) |
| .call(distX); |
| g.select('.nv-distributionY') |
| .datum(data.filter(function(d) { return !d.disabled })) |
| .call(distY); |
| } |
| |
| |
| |
| //============================================================ |
| // Event Handling/Dispatching (in chart's scope) |
| //------------------------------------------------------------ |
| |
| 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'); |
| g.select('.nv-point-paths').style('pointer-events', d.disabled ? 'all' : 'none' ); |
| |
| if (d.disabled) { |
| x.distortion(fisheye).focus(0); |
| y.distortion(fisheye).focus(0); |
| |
| g.select('.nv-scatterWrap').call(scatter); |
| g.select('.nv-x.nv-axis').call(xAxis); |
| g.select('.nv-y.nv-axis').call(yAxis); |
| } else { |
| pauseFisheye = false; |
| } |
| |
| chart.update(); |
| }); |
| |
| legend.dispatch.on('stateChange', function(newState) { |
| state = newState; |
| dispatch.stateChange(state); |
| chart.update(); |
| }); |
| |
| |
| scatter.dispatch.on('elementMouseover.tooltip', function(e) { |
| d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex) |
| .attr('y1', e.pos[1] - availableHeight); |
| d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex) |
| .attr('x2', e.pos[0] + distX.size()); |
| |
| e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top]; |
| dispatch.tooltipShow(e); |
| }); |
| |
| dispatch.on('tooltipShow', function(e) { |
| if (tooltips) showTooltip(e, that.parentNode); |
| }); |
| |
| // Update chart from a state object passed to event handler |
| dispatch.on('changeState', function(e) { |
| |
| if (typeof e.disabled !== 'undefined') { |
| data.forEach(function(series,i) { |
| series.disabled = e.disabled[i]; |
| }); |
| |
| state.disabled = e.disabled; |
| } |
| |
| chart.update(); |
| }); |
| |
| //============================================================ |
| |
| |
| //store old scales for use in transitions on update |
| x0 = x.copy(); |
| y0 = y.copy(); |
| |
| |
| }); |
| |
| return chart; |
| } |
| |
| |
| //============================================================ |
| // Event Handling/Dispatching (out of chart's scope) |
| //------------------------------------------------------------ |
| |
| scatter.dispatch.on('elementMouseout.tooltip', function(e) { |
| dispatch.tooltipHide(e); |
| |
| d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex) |
| .attr('y1', 0); |
| d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex) |
| .attr('x2', distY.size()); |
| }); |
| dispatch.on('tooltipHide', function() { |
| if (tooltips) nv.tooltip.cleanup(); |
| }); |
| |
| //============================================================ |
| |
| |
| //============================================================ |
| // Expose Public Variables |
| //------------------------------------------------------------ |
| |
| // expose chart's sub-components |
| chart.dispatch = dispatch; |
| chart.scatter = scatter; |
| chart.legend = legend; |
| chart.controls = controls; |
| chart.xAxis = xAxis; |
| chart.yAxis = yAxis; |
| chart.distX = distX; |
| chart.distY = distY; |
| |
| d3.rebind(chart, scatter, 'id', 'interactive', 'pointActive', 'x', 'y', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'sizeDomain', 'sizeRange', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'useVoronoi'); |
| |
| chart.options = nv.utils.optionsFunc.bind(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.color = function(_) { |
| if (!arguments.length) return color; |
| color = nv.utils.getColor(_); |
| legend.color(color); |
| distX.color(color); |
| distY.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.showXAxis = function(_) { |
| if (!arguments.length) return showXAxis; |
| showXAxis = _; |
| return chart; |
| }; |
| |
| chart.showYAxis = function(_) { |
| if (!arguments.length) return showYAxis; |
| showYAxis = _; |
| return chart; |
| }; |
| |
| chart.rightAlignYAxis = function(_) { |
| if(!arguments.length) return rightAlignYAxis; |
| rightAlignYAxis = _; |
| yAxis.orient( (_) ? 'right' : 'left'); |
| 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.tooltipXContent = function(_) { |
| if (!arguments.length) return tooltipX; |
| tooltipX = _; |
| return chart; |
| }; |
| |
| chart.tooltipYContent = function(_) { |
| if (!arguments.length) return tooltipY; |
| tooltipY = _; |
| return chart; |
| }; |
| |
| chart.state = function(_) { |
| if (!arguments.length) return state; |
| state = _; |
| return chart; |
| }; |
| |
| chart.defaultState = function(_) { |
| if (!arguments.length) return defaultState; |
| defaultState = _; |
| return chart; |
| }; |
| |
| chart.noData = function(_) { |
| if (!arguments.length) return noData; |
| noData = _; |
| return chart; |
| }; |
| |
| chart.transitionDuration = function(_) { |
| if (!arguments.length) return transitionDuration; |
| transitionDuration = _; |
| return chart; |
| }; |
| |
| //============================================================ |
| |
| |
| return chart; |
| } |
