Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

No jquery - fix #132 #267

Closed
wants to merge 3 commits into from
Closed

No jquery - fix #132 #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7069b7
Remove jquery from line.js
Dec 2, 2014
81eb521
fix(charts): Removed jquery occurences in charts
Dec 11, 2014
88845cd
fix(): Remove jquery occurences in common and misc
Dec 11, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 25 additions & 14 deletions src/charts/bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,23 @@ charts.bar = function(args) {
init(args);
x_axis(args);
y_axis_categorical(args);
this.$svg = document.querySelector(args.target + ' svg');
this.svg = d3.select(this.$svg);
return this;
}

this.mainPlot = function() {
var svg = d3.select($(args.target).find('svg').get(0));
var $svg = $($(args.target).find('svg').get(0));
var g;

//remove the old barplot, add new one
$svg.find('.barplot').remove();
var oldBarplot = this.$svg.querySelector('.barplot');

if(oldBarplot)
oldBarplot.parentNode.removeChild(oldBarplot);

var data = args.data[0];

var g = svg.append('g')
var g = this.svg.append('g')
.classed('barplot', true);

var appropriate_height = args.scales.Y.rangeBand()/1.5;
Expand Down Expand Up @@ -80,24 +83,29 @@ charts.bar = function(args) {
};

this.rollover = function() {
var svg = d3.select($(args.target).find('svg').get(0));
var $svg = $($(args.target).find('svg').get(0));
var g;

//remove the old rollovers if they already exist
$svg.find('.transparent-rollover-rect').remove();
$svg.find('.active_datapoint').remove();
[
this.$svg.querySelector('.transparent-rollover-rect'),
this.$svg.querySelector('.active_datapoint')
].forEach(function(e, i) {
if(!e)
return;

e.parentNode.removeChild(e);
})

//rollover text
svg.append('text')
this.svg.append('text')
.attr('class', 'active_datapoint')
.attr('xml:space', 'preserve')
.attr('x', args.width - args.right)
.attr('y', args.top / 2)
.attr('dy', '.35em')
.attr('text-anchor', 'end');

var g = svg.append('g')
var g = this.svg.append('g')
.attr('class', 'transparent-rollover-rect')

//draw rollover bars
Expand All @@ -114,7 +122,7 @@ charts.bar = function(args) {
}

this.rolloverOn = function(args) {
var svg = d3.select($(args.target).find('svg').get(0));
var svg = this.svg;
var x_formatter = d3.time.format('%Y-%m-%d');

return function(d, i) {
Expand Down Expand Up @@ -142,8 +150,10 @@ charts.bar = function(args) {
}
}

var el = document.querySelectorAll(args.target + ' svg g.barplot .bar')[i]

//highlight active bar
d3.selectAll($(args.target + ' svg g.barplot .bar:eq(' + i + ')'))
d3.select(el)
.classed('active', true);

//update rollover text
Expand All @@ -170,11 +180,12 @@ charts.bar = function(args) {
}

this.rolloverOff = function(args) {
var svg = d3.select($(args.target).find('svg').get(0));
var svg = this.svg;

return function(d, i) {
var el = document.querySelectorAll(args.target + ' svg g.barplot .bar')[i]
//reset active bar
d3.selectAll($(args.target).find('svg g.barplot .bar:eq(' + i + ')'))
d3.select(el)
.classed('active', false);

//reset active data point text
Expand Down
45 changes: 29 additions & 16 deletions src/charts/histogram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,21 @@ charts.histogram = function(args) {
init(args);
x_axis(args);
y_axis(args);
this.$svg = document.querySelector(args.target + ' svg');
this.svg = d3.select(this.$svg);
return this;
}

this.mainPlot = function() {
var svg = d3.select($(args.target).find('svg').get(0));
var $svg = $($(args.target).find('svg').get(0));

var g;

//remove the old histogram, add new one
$svg.find('.histogram').remove();
var oldHistogram = this.$svg.querySelector('.histogram');

if(oldHistogram)
oldHistogram.parentNode.removeChild(oldHistogram);

var g = svg.append("g")
var g = this.svg.append("g")
.attr("class", "histogram");

var bar = g.selectAll(".bar")
Expand Down Expand Up @@ -57,23 +59,29 @@ charts.histogram = function(args) {
};

this.rollover = function() {
var svg = d3.select($(args.target).find('svg').get(0));
var $svg = $($(args.target).find('svg').get(0));
var g;

//remove the old rollovers if they already exist
$svg.find('.transparent-rollover-rect').remove();
$svg.find('.active_datapoint').remove();
[
this.$svg.querySelector('.transparent-rollover-rect'),
this.$svg.querySelector('.active_datapoint')
].forEach(function(e, i) {

if(!e)
return;

e.parentNode.removeChild(e);
})

//rollover text
svg.append('text')
this.svg.append('text')
.attr('class', 'active_datapoint')
.attr('xml:space', 'preserve')
.attr('x', args.width - args.right)
.attr('y', args.top / 2)
.attr('text-anchor', 'end');

var g = svg.append('g')
var g = this.svg.append('g')
.attr('class', 'transparent-rollover-rect')

//draw rollover bars
Expand Down Expand Up @@ -107,7 +115,7 @@ charts.histogram = function(args) {
}

this.rolloverOn = function(args) {
var svg = d3.select($(args.target).find('svg').get(0));
var svg = this.svg;
var x_formatter = d3.time.format('%Y-%m-%d');

return function(d, i) {
Expand Down Expand Up @@ -136,7 +144,9 @@ charts.histogram = function(args) {
}

//highlight active bar
d3.selectAll($(args.target).find(' svg .bar :eq(' + i + ')'))
var el = document.querySelectorAll(args.target + ' svg .bar')[i]

d3.selectAll(el.childNodes)
.classed('active', true);

//update rollover text
Expand Down Expand Up @@ -165,13 +175,16 @@ charts.histogram = function(args) {
}

this.rolloverOff = function(args) {
var svg = d3.select($(args.target).find('svg').get(0));
var svg = this.svg;

return function(d, i) {

var el = document.querySelectorAll(args.target + ' svg .bar')[i]

//reset active bar
d3.selectAll($(args.target).find('svg .bar :eq(' + i + ')'))
d3.selectAll(el.childNodes)
.classed('active', false);

//reset active data point text
svg.select('.active_datapoint')
.text('');
Expand Down
55 changes: 30 additions & 25 deletions src/charts/line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ charts.line = function(args) {
init(args);
x_axis(args);
y_axis(args);
this.$svg = document.querySelector(args.target + ' svg')
this.svg = d3.select(this.$svg)
return this;
}

this.mainPlot = function() {
var svg = d3.select($(args.target).find('svg').get(0));
var g;
var data_median = 0;

Expand Down Expand Up @@ -67,35 +68,36 @@ charts.line = function(args) {

//add confidence band
if(args.show_confidence_band) {
svg.append('path')
this.svg.append('path')
.attr('class', 'confidence-band')
.attr('d', confidence_area(args.data[i]));
}

//add the area
var $area = $(args.target).find('svg path.area' + (line_id) + '-color');
var $area = document.querySelectorAll(args.target + ' svg path.area' + (line_id) + '-color');
if(args.area && !args.use_data_y_min && !args.y_axis_negative && args.data.length <= 1) {
//if area already exists, transition it
if($area.length > 0) {
d3.selectAll($(args.target).find('svg path.area' + (line_id) + '-color'))
d3.selectAll($area)
.transition()
.duration(function() {
return (args.transition_on_update) ? 1000 : 0;
})
.attr('d', area(args.data[i]));
}
else { //otherwise, add the area
svg.append('path')
this.svg.append('path')
.attr('class', 'main-area ' + 'area' + (line_id) + '-color')
.attr('d', area(args.data[i]));
}
} else if ($area.length > 0) {
$area.remove();
$area.parentNode.removeChild($area);
}

var $lines = document.querySelectorAll(args.target + ' svg path.line' + (line_id) + '-color')
//add the line, if it already exists, transition the fine gentleman
if($(args.target).find('svg path.line' + (line_id) + '-color').length > 0) {
d3.selectAll($(args.target).find('svg path.line' + (line_id) + '-color'))
if($lines.length > 0) {
d3.selectAll($lines)
.transition()
.duration(function() {
return (args.transition_on_update) ? 1000 : 0;
Expand All @@ -109,15 +111,15 @@ charts.line = function(args) {
return d[args.y_accessor];
})

svg.append('path')
this.svg.append('path')
.attr('class', 'main-line ' + 'line' + (line_id) + '-color')
.attr('d', flat_line(args.data[i]))
.transition()
.duration(1000)
.attr('d', line(args.data[i]));
}
else { //or just add the line
svg.append('path')
this.svg.append('path')
.attr('class', 'main-line ' + 'line' + (line_id) + '-color')
.attr('d', line(args.data[i]));
}
Expand All @@ -131,7 +133,7 @@ charts.line = function(args) {
}

if(args.legend) {
$(args.legend_target).html(legend);
document.querySelector(args.legend_target).innerHTML = legend;
}

return this;
Expand All @@ -143,20 +145,23 @@ charts.line = function(args) {
};

this.rollover = function() {
var svg = d3.select($(args.target).find('svg').get(0));
var $svg = $($(args.target).find('svg').get(0));
var g;

//remove the old rollovers if they already exist
$svg.find('.transparent-rollover-rect').remove();
$svg.find('.voronoi').remove();

//remove the old rollover text and circle if they already exist
$svg.find('.active_datapoint').remove();
$svg.find('.line_rollover_circle').remove();
[
this.$svg.querySelector('.transparent-rollover-rect'),
this.$svg.querySelector('.voronoi'),
this.$svg.querySelector('.active_datapoint'),
this.$svg.querySelector('.line_rollover_circle')
].forEach(function(e, i) {
if(!e)
return;

e.parentNode.removeChild(e);
})

//rollover text
svg.append('text')
this.svg.append('text')
.attr('class', 'active_datapoint')
.classed('active-datapoint-small', args.use_small_class)
.attr('xml:space', 'preserve')
Expand All @@ -165,7 +170,7 @@ charts.line = function(args) {
.attr('text-anchor', 'end');

//append circle
svg.append('circle')
this.svg.append('circle')
.classed('line_rollover_circle', true)
.attr('cx', 0)
.attr('cy', 0)
Expand Down Expand Up @@ -196,7 +201,7 @@ charts.line = function(args) {
.y(function(d) { return args.scales.Y(d[args.y_accessor]).toFixed(2); })
.clipExtent([[args.buffer, args.buffer], [args.width - args.buffer, args.height - args.buffer]]);

var g = svg.append('g')
var g = this.svg.append('g')
.attr('class', 'voronoi')

//we'll be using these when constructing the voronoi rollovers
Expand Down Expand Up @@ -243,7 +248,7 @@ charts.line = function(args) {
line_id = args.custom_line_color_map[0];
}

var g = svg.append('g')
var g = this.svg.append('g')
.attr('class', 'transparent-rollover-rect')

var xf = args.data[0].map(args.scalefns.xf);
Expand Down Expand Up @@ -304,7 +309,7 @@ charts.line = function(args) {
}

this.rolloverOn = function(args) {
var svg = d3.select($(args.target).find('svg').get(0));
var svg = this.svg;
var x_formatter = d3.time.format('%Y-%m-%d');

return function(d, i) {
Expand Down Expand Up @@ -391,7 +396,7 @@ charts.line = function(args) {
}

this.rolloverOff = function(args) {
var svg = d3.select($(args.target).find('svg').get(0));
var svg = this.svg;

return function(d, i) {
if(args.linked && globals.link) {
Expand Down
2 changes: 1 addition & 1 deletion src/charts/missing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ charts.missing = function(args) {

// do we need to clear the legend?
if(args.legend_target)
$(args.legend_target).html('');
document.querySelector(args.legend_target).innerHTML = '';

svg.append('rect')
.attr('class', 'missing-pane')
Expand Down
Loading