diff --git a/src/d3.css b/src/d3.css index 1d54c9d..868fd0a 100644 --- a/src/d3.css +++ b/src/d3.css @@ -264,6 +264,11 @@ svg .title { stroke-opacity: .75; stroke-width: 0.1px; } + +.d3stackedarea path.area.hover { + fill-opacity: 1; + stroke-opacity: 1; +} /* .d3stackedarea .groups path { stroke-opacity: 0; diff --git a/src/models/line.js b/src/models/line.js index 94c76f6..c02e23e 100644 --- a/src/models/line.js +++ b/src/models/line.js @@ -108,24 +108,6 @@ nv.models.line = function() { .y(function(d,i) { return y(getY(d,i)) }) ); -/* - var points = groups.selectAll('circle.point') - .data(function(d) { return d.values }); - points.enter().append('circle') - .attr('cx', function(d,i) { return x0(getX(d,i)) }) - .attr('cy', function(d,i) { return y0(getY(d,i)) }); - d3.transition(groups.exit().selectAll('circle.point')) - .attr('cx', function(d,i) { return x(getX(d,i)) }) - .attr('cy', function(d,i) { return y(getY(d,i)) }) - .remove(); - d3.transition(points) - .attr('class', function(d,i) { return 'point point-' + i }) - .attr('cx', function(d,i) { return x(getX(d,i)) }) - .attr('cy', function(d,i) { return y(getY(d,i)) }) - .attr('r', getSize); - -*/ - scatter .size(getSize) diff --git a/src/models/scatter.js b/src/models/scatter.js index 98c8add..8840b86 100644 --- a/src/models/scatter.js +++ b/src/models/scatter.js @@ -11,8 +11,6 @@ nv.models.scatter = function() { 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 - showDistX = false, - showDistY = false, interactive = true, // If true, plots a voronoi overlay for advanced point interection clipEdge = false, // if true, masks lines within x and y scale clipVoronoi = true, // if true, masks each point with a circle... can turn off to slightly increase performance @@ -71,7 +69,6 @@ nv.models.scatter = function() { var gEnter = wrapEnter.append('g'); gEnter.append('g').attr('class', 'groups'); - //gEnter.append('g').attr('class', 'distribution'); wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); @@ -164,27 +161,11 @@ nv.models.scatter = function() { dispatch.on('pointMouseover.point', function(d) { wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex) .classed('hover', true); - /* - if (showDistX) - wrap.select('.series-' + d.seriesIndex + ' .distX-' + d.pointIndex) - .attr('y1', d.pos[1] - margin.top); - if (showDistY) - wrap.select('.series-' + d.seriesIndex + ' .distY-' + d.pointIndex) - .attr('x1', d.pos[0] - margin.left); - */ }); dispatch.on('pointMouseout.point', function(d) { wrap.select('.series-' + d.seriesIndex + ' circle.point-' + d.pointIndex) .classed('hover', false); - /* - if (showDistX) - wrap.select('.series-' + d.seriesIndex + ' .distX-' + d.pointIndex) - .attr('y1', y.range()[0]); - if (showDistY) - wrap.select('.series-' + d.seriesIndex + ' .distY-' + d.pointIndex) - .attr('x1', x.range()[0]); - */ }); } @@ -230,48 +211,6 @@ nv.models.scatter = function() { .attr('r', function(d,i) { return z(getSize(d,i)) }); - /* - if (showDistX) { - var distX = groups.selectAll('line.distX') - .data(function(d) { return d.values }) - distX.enter().append('line') - .attr('x1', function(d,i) { return x0(getX(d,i)) }) - .attr('x2', function(d,i) { return x0(getX(d,i)) }) - //d3.transition(distX.exit()) - d3.transition(groups.exit().selectAll('line.distX')) - .attr('x1', function(d,i) { return x(getX(d,i)) }) - .attr('x2', function(d,i) { return x(getX(d,i)) }) - .remove(); - distX - .attr('class', function(d,i) { return 'distX distX-' + i }) - .attr('y1', y.range()[0]) - .attr('y2', y.range()[0] + 8); - d3.transition(distX) - .attr('x1', function(d,i) { return x(getX(d,i)) }) - .attr('x2', function(d,i) { return x(getX(d,i)) }) - } - - if (showDistY) { - var distY = groups.selectAll('line.distY') - .data(function(d) { return d.values }) - distY.enter().append('line') - .attr('y1', function(d,i) { return y0(getY(d,i)) }) - .attr('y2', function(d,i) { return y0(getY(d,i)) }); - //d3.transition(distY.exit()) - d3.transition(groups.exit().selectAll('line.distY')) - .attr('y1', function(d,i) { return y(getY(d,i)) }) - .attr('y2', function(d,i) { return y(getY(d,i)) }) - .remove(); - distY - .attr('class', function(d,i) { return 'distY distY-' + i }) - .attr('x1', x.range()[0]) - .attr('x2', x.range()[0] - 8) - d3.transition(distY) - .attr('y1', function(d,i) { return y(getY(d,i)) }) - .attr('y2', function(d,i) { return y(getY(d,i)) }); - } - */ - clearTimeout(timeoutID); timeoutID = setTimeout(updateInteractiveLayer, 750); @@ -367,18 +306,6 @@ nv.models.scatter = function() { 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.clipEdge = function(_) { if (!arguments.length) return clipEdge; clipEdge = _; diff --git a/src/models/scatterWithLegend.js b/src/models/scatterWithLegend.js index ecd9e66..fd54e99 100644 --- a/src/models/scatterWithLegend.js +++ b/src/models/scatterWithLegend.js @@ -7,6 +7,8 @@ nv.models.scatterWithLegend = function() { yAxisRender = true, xAxisLabelText = false, yAxisLabelText = false, + showDistX = false, + showDistY = false, color = d3.scale.category10().range(), forceX = [], forceY = [], @@ -237,6 +239,18 @@ nv.models.scatterWithLegend = function() { return chart; }; + chart.showDistX = function(_) { + if (!arguments.length) return showDistX; + showDistX = _; + return chart; + }; + + chart.showDistY = function(_) { + if (!arguments.length) return showDistY; + showDistY = _; + return chart; + }; + return chart; } diff --git a/src/models/stackedArea.js b/src/models/stackedArea.js index 2439fd5..a381e84 100644 --- a/src/models/stackedArea.js +++ b/src/models/stackedArea.js @@ -10,7 +10,7 @@ nv.models.stackedArea = function() { offset = 'zero', order = 'default', xDomain, yDomain, - dispatch = d3.dispatch('tooltipShow', 'tooltipHide'); + dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout' ); /************************************ * offset: @@ -24,7 +24,7 @@ nv.models.stackedArea = function() { * 'default' (input order) ************************************/ - var scatter= nv.models.scatter().size(2), //TODO: this really should just be a scatterplot overlayed, not a line + var scatter= nv.models.scatter().size(2), x = d3.scale.linear(), y = d3.scale.linear(); @@ -60,13 +60,12 @@ nv.models.stackedArea = function() { scatter - //.interactive(false) //if we were to turn off interactive, the whole line chart should be removed .width(availableWidth) .height(availableHeight) .xDomain(x.domain()) .yDomain(y.domain()) .x(getX) - .y(function(d) { return d.y + d.y0 }) + .y(function(d) { return d.y + d.y0 }) // TODO: allow for getY to be other than d.y .color(data.map(function(d,i) { return d.color || color[i % 10]; }).filter(function(d,i) { return !data[i].disabled })); @@ -101,7 +100,40 @@ nv.models.stackedArea = function() { var path = g.select('.areaWrap').selectAll('path.area') .data(function(d) { return d }); - path.enter().append('path').attr('class', 'area'); + path.enter().append('path').attr('class', function(d,i) { return 'area area-' + i }) + .on('mouseover', function(d,i) { + d3.select(this).classed('hover', true); + dispatch.areaMouseover({ + point: d, + series: d.key, + //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top], + pos: [d3.event.pageX, d3.event.pageY], + seriesIndex: i + //pointIndex: d.point + }); + }) + .on('mouseout', function(d,i) { + d3.select(this).classed('hover', false); + dispatch.areaMouseout({ + point: d, + series: d.key, + //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top], + pos: [d3.event.pageX, d3.event.pageY], + seriesIndex: i + //pointIndex: d.point + }); + }) + .on('click', function(d,i) { + d3.select(this).classed('hover', false); + dispatch.areaClick({ + point: d, + series: d.key, + //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top], + pos: [d3.event.pageX, d3.event.pageY], + seriesIndex: i + //pointIndex: d.point + }); + }) d3.transition(path.exit()) .attr('d', function(d,i) { return zeroArea(d.values,i) }) .remove(); @@ -111,8 +143,17 @@ nv.models.stackedArea = function() { d3.transition(path) .attr('d', function(d,i) { return area(d.values,i) }) + + scatter.dispatch.on('pointMouseover.area', function(e) { + g.select('.area-' + e.seriesIndex).classed('hover', true); + }); + scatter.dispatch.on('pointMouseout.area', function(e) { + g.select('.area-' + e.seriesIndex).classed('hover', false); + }); + }); + return chart; } @@ -189,6 +230,7 @@ nv.models.stackedArea = function() { chart.dispatch = dispatch; + scatter.dispatch.on('pointMouseover.tooltip', function(e) { dispatch.tooltipShow({ point: e.point,