Fix issue w3c#295

shikhar-scs · Jan 8, 2015 · 2c68b7c · 2c68b7c
1 parent 1a089f0
commit 2c68b7c
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 7 deletions.
diff --git a/dist/metricsgraphics.js b/dist/metricsgraphics.js
@@ -2502,7 +2502,7 @@
                     d3.selectAll('.mg-line' + d['line_id'] + '-color.roll_' + id)
                         .each(function(d, i) {
                             d3.select(this).on('mouseover')(d,i);
-                    })
+                        })
                 }
 
                 svg.selectAll('text')
@@ -2572,7 +2572,7 @@
                     d3.selectAll('.roll_' + id)
                         .each(function(d, i) {
                             d3.select(this).on('mouseout')(d);
-                    });
+                        })
                 }
 
                 //remove active datapoint text on mouse out
@@ -2687,7 +2687,13 @@
             var bar = g.selectAll('.mg-bar')
                 .data(args.data[0])
                     .enter().append('g')
-                        .attr('class', 'mg-rollover-rects')
+                        .attr('class', function(d, i) {
+                            if(args.linked) {
+                                return 'mg-rollover-rects roll_' + i;
+                            } else {
+                                return 'mg-rollover-rects';
+                            }
+                        })
                         .attr('transform', function(d) {
                             return "translate(" + (args.scales.X(d[args.x_accessor])) + "," + 0 + ")";
                         });
@@ -2750,6 +2756,17 @@
                 d3.selectAll($(args.target).find(' svg .mg-bar :eq(' + i + ')'))
                     .classed('active', true);
 
+                //trigger mouseover on all matching bars
+                if(args.linked && !MG.globals.link) {
+                    MG.globals.link = true;
+
+                    //trigger mouseover on matching bars in .linked charts
+                    d3.selectAll('.mg-rollover-rects.roll_' + i + ' rect')
+                        .each(function(d) { //use existing i
+                            d3.select(this).on('mouseover')(d,i);
+                        })
+                }
+
                 //update rollover text
                 if (args.show_rollover_text) {
                     svg.select('.mg-active-datapoint')
@@ -2779,6 +2796,16 @@
             var svg = d3.select($(args.target).find('svg').get(0));
 
             return function(d, i) {
+                if(args.linked && MG.globals.link) {
+                    MG.globals.link = false;
+
+                    //trigger mouseout on matching bars in .linked charts
+                    d3.selectAll('.mg-rollover-rects.roll_' + i + ' rect')
+                        .each(function(d) { //use existing i
+                            d3.select(this).on('mouseout')(d,i);
+                        })
+                }
+
                 //reset active bar
                 d3.selectAll($(args.target).find('svg .mg-bar :eq(' + i + ')'))
                     .classed('active', false);

diff --git a/dist/metricsgraphics.min.js b/dist/metricsgraphics.min.js
diff --git a/examples/js/main.js b/examples/js/main.js
@@ -688,6 +688,7 @@ $(document).ready(function() {
         height: trunk.height,
         right: trunk.right,
         target: '#histogram3',
+        linked: true,
         y_extended_ticks: true,
         x_accessor:'val1',
         mouseover: function(d, i) {
@@ -706,6 +707,7 @@ $(document).ready(function() {
         data: fourth,
         chart_type: 'histogram',
         width: trunk.width,
+        linked: true,
         height: trunk.height,
         right: trunk.right,
         target: '#histogram4',

diff --git a/src/js/charts/histogram.js b/src/js/charts/histogram.js
@@ -85,7 +85,13 @@ charts.histogram = function(args) {
         var bar = g.selectAll('.mg-bar')
             .data(args.data[0])
                 .enter().append('g')
-                    .attr('class', 'mg-rollover-rects')
+                    .attr('class', function(d, i) {
+                        if(args.linked) {
+                            return 'mg-rollover-rects roll_' + i;
+                        } else {
+                            return 'mg-rollover-rects';
+                        }
+                    })
                     .attr('transform', function(d) {
                         return "translate(" + (args.scales.X(d[args.x_accessor])) + "," + 0 + ")";
                     });
@@ -148,6 +154,17 @@ charts.histogram = function(args) {
             d3.selectAll($(args.target).find(' svg .mg-bar :eq(' + i + ')'))
                 .classed('active', true);
 
+            //trigger mouseover on all matching bars
+            if(args.linked && !MG.globals.link) {
+                MG.globals.link = true;
+
+                //trigger mouseover on matching bars in .linked charts
+                d3.selectAll('.mg-rollover-rects.roll_' + i + ' rect')
+                    .each(function(d) { //use existing i
+                        d3.select(this).on('mouseover')(d,i);
+                    })
+            }
+
             //update rollover text
             if (args.show_rollover_text) {
                 svg.select('.mg-active-datapoint')
@@ -177,6 +194,16 @@ charts.histogram = function(args) {
         var svg = d3.select($(args.target).find('svg').get(0));
 
         return function(d, i) {
+            if(args.linked && MG.globals.link) {
+                MG.globals.link = false;
+
+                //trigger mouseout on matching bars in .linked charts
+                d3.selectAll('.mg-rollover-rects.roll_' + i + ' rect')
+                    .each(function(d) { //use existing i
+                        d3.select(this).on('mouseout')(d,i);
+                    })
+            }
+
             //reset active bar
             d3.selectAll($(args.target).find('svg .mg-bar :eq(' + i + ')'))
                 .classed('active', false);

diff --git a/src/js/charts/line.js b/src/js/charts/line.js
@@ -353,7 +353,7 @@ charts.line = function(args) {
                 d3.selectAll('.mg-line' + d['line_id'] + '-color.roll_' + id)
                     .each(function(d, i) {
                         d3.select(this).on('mouseover')(d,i);
-                })
+                    })
             }
 
             svg.selectAll('text')
@@ -423,7 +423,7 @@ charts.line = function(args) {
                 d3.selectAll('.roll_' + id)
                     .each(function(d, i) {
                         d3.select(this).on('mouseout')(d);
-                });
+                    })
             }
 
             //remove active datapoint text on mouse out