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

Highlight window and dim rest of view window, works in FF< but having issues withthe clipping in chrome

Browse Source
master-patched
Bob Monteverde 12 years ago
parent f6caf91de4
commit d1ebad10e4
4 changed files with 156 additions and 8 deletions
Show Stats Download Patch File Download Diff File

74
nv.d3.js
Unescape Escape View File

@ -2261,6 +2261,7 @@ nv.models.historicalStockChart = function() {
height3 = 80,
getX = function(d) { return d.x },
getY = function(d) { return d.y },
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
color = d3.scale.category20().range(),
showLegend = false,
tooltips = true,
@ -2358,10 +2359,18 @@ nv.models.historicalStockChart = function() {
*/
/*
var wrap = d3.select(this).selectAll('g.wrap.historicalStockChart').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 historicalStockChart').append('g');
var defsEnter = gEnter.append('defs');
*/
var wrap = container.selectAll('g.wrap.historicalStockChart').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 historicalStockChart');
var defsEnter = wrapEnter.append('defs');
var gEnter = wrapEnter.append('g');
gEnter.append('g').attr('class', 'brushBackground');
gEnter.append('g').attr('class', 'x axis');
gEnter.append('g').attr('class', 'x2 axis');
gEnter.append('g').attr('class', 'x3 axis');
@ -2377,6 +2386,7 @@ nv.models.historicalStockChart = function() {
var g = wrap.select('g');
var defs = g.select('defs');
if (showLegend) {
@ -2402,7 +2412,6 @@ nv.models.historicalStockChart = function() {
stocks
.width(availableWidth)
.height(availableHeight)
@ -2442,6 +2451,45 @@ nv.models.historicalStockChart = function() {
d3.transition(linesWrap).call(lines);
var brushClip = defsEnter.append('clipPath')
//var brushClip = defsEnter.append('clipPath')
.attr('id', 'brushBackground-clip-' + id)
//.append('g')
/*
brushClip.append('rect')
.attr('class', 'center')
.attr('x', 0)
.attr('y', 0)
.style('fill-opacity', 0)
.style('opacity', 0)
.attr('height', availableHeight3);
*/
brushClip.append('rect')
.attr('class', 'left')
.attr('x', 0)
.attr('y', 0)
.attr('height', availableHeight3);
brushClip.append('rect')
.attr('class', 'right')
.attr('x', 0)
.attr('y', 0)
.attr('height', availableHeight3);
wrap.select('#edge-clip-' + id + ' rect')
.attr('width', availableWidth)
.attr('height', availableHeight);
g.select('.brushBackground')
.attr('clip-path', 'url(#brushBackground-clip-' + id + ')')
.attr('transform', 'translate(0,' + (availableHeight + margin.bottom + height2) + ')')
.append('rect')
.attr('width', availableWidth)
.attr('height', availableHeight3)
gBrush = g.select('.x.brush')
.attr('transform', 'translate(0,' + (availableHeight + margin.bottom + height2) + ')')
.call(brush);
@ -2573,6 +2621,9 @@ nv.models.historicalStockChart = function() {
function onBrush() {
//nv.log(this, arguments);
updateFocus();
//linesWrap.call(lines)
@ -2586,6 +2637,19 @@ nv.models.historicalStockChart = function() {
var extent = brush.empty() ? x3.domain() : brush.extent();
/*
wrap.select('#brushBackground-clip-' + id + ' rect.center')
.attr('x', x3(extent[0]))
.attr('width', x3(extent[1]) - x3(extent[0]));
*/
wrap.select('#brushBackground-clip-' + id + ' rect.left')
.attr('width', x3(extent[0]) - x3.range()[0])
wrap.select('#brushBackground-clip-' + id + ' rect.right')
.attr('x', x3(extent[1]))
.attr('width', x3.range()[1] - x3(extent[1]));
var stocksWrap = g.select('.stocksWrap')
.datum(
[{
@ -2709,6 +2773,12 @@ nv.models.historicalStockChart = function() {
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
chart.showLegend = function(_) {
if (!arguments.length) return showLegend;
showLegend = _;

8
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

74
src/models/historicalStockChart.js
Unescape Escape View File

@ -9,6 +9,7 @@ nv.models.historicalStockChart = function() {
height3 = 80,
getX = function(d) { return d.x },
getY = function(d) { return d.y },
id = Math.floor(Math.random() * 10000), //Create semi-unique ID incase user doesn't select one
color = d3.scale.category20().range(),
showLegend = false,
tooltips = true,
@ -106,10 +107,18 @@ nv.models.historicalStockChart = function() {
*/
/*
var wrap = d3.select(this).selectAll('g.wrap.historicalStockChart').data([data]);
var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 historicalStockChart').append('g');
var defsEnter = gEnter.append('defs');
*/
var wrap = container.selectAll('g.wrap.historicalStockChart').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 historicalStockChart');
var defsEnter = wrapEnter.append('defs');
var gEnter = wrapEnter.append('g');
gEnter.append('g').attr('class', 'brushBackground');
gEnter.append('g').attr('class', 'x axis');
gEnter.append('g').attr('class', 'x2 axis');
gEnter.append('g').attr('class', 'x3 axis');
@ -125,6 +134,7 @@ nv.models.historicalStockChart = function() {
var g = wrap.select('g');
var defs = g.select('defs');
if (showLegend) {
@ -150,7 +160,6 @@ nv.models.historicalStockChart = function() {
stocks
.width(availableWidth)
.height(availableHeight)
@ -190,6 +199,45 @@ nv.models.historicalStockChart = function() {
d3.transition(linesWrap).call(lines);
var brushClip = defsEnter.append('clipPath')
//var brushClip = defsEnter.append('clipPath')
.attr('id', 'brushBackground-clip-' + id)
//.append('g')
/*
brushClip.append('rect')
.attr('class', 'center')
.attr('x', 0)
.attr('y', 0)
.style('fill-opacity', 0)
.style('opacity', 0)
.attr('height', availableHeight3);
*/
brushClip.append('rect')
.attr('class', 'left')
.attr('x', 0)
.attr('y', 0)
.attr('height', availableHeight3);
brushClip.append('rect')
.attr('class', 'right')
.attr('x', 0)
.attr('y', 0)
.attr('height', availableHeight3);
wrap.select('#edge-clip-' + id + ' rect')
.attr('width', availableWidth)
.attr('height', availableHeight);
g.select('.brushBackground')
.attr('clip-path', 'url(#brushBackground-clip-' + id + ')')
.attr('transform', 'translate(0,' + (availableHeight + margin.bottom + height2) + ')')
.append('rect')
.attr('width', availableWidth)
.attr('height', availableHeight3)
gBrush = g.select('.x.brush')
.attr('transform', 'translate(0,' + (availableHeight + margin.bottom + height2) + ')')
.call(brush);
@ -321,6 +369,9 @@ nv.models.historicalStockChart = function() {
function onBrush() {
//nv.log(this, arguments);
updateFocus();
//linesWrap.call(lines)
@ -334,6 +385,19 @@ nv.models.historicalStockChart = function() {
var extent = brush.empty() ? x3.domain() : brush.extent();
/*
wrap.select('#brushBackground-clip-' + id + ' rect.center')
.attr('x', x3(extent[0]))
.attr('width', x3(extent[1]) - x3(extent[0]));
*/
wrap.select('#brushBackground-clip-' + id + ' rect.left')
.attr('width', x3(extent[0]) - x3.range()[0])
wrap.select('#brushBackground-clip-' + id + ' rect.right')
.attr('x', x3(extent[1]))
.attr('width', x3.range()[1] - x3(extent[1]));
var stocksWrap = g.select('.stocksWrap')
.datum(
[{
@ -457,6 +521,12 @@ nv.models.historicalStockChart = function() {
return chart;
};
chart.id = function(_) {
if (!arguments.length) return id;
id = _;
return chart;
};
chart.showLegend = function(_) {
if (!arguments.length) return showLegend;
showLegend = _;

8
src/nv.d3.css
Unescape Escape View File

@ -112,6 +112,14 @@ svg .title {
shape-rendering: crispEdges;
}
.nvd3.historicalStockChart .brush .extent {
fill-opacity: 0 !important;
}
.nvd3.historicalStockChart .brushBackground {
fill: #999;
fill-opacity: .5;
}
/**********

Write Preview
Loading…
Cancel
Save