Version 2.2.2

- More! Heatmap Improvements. - Refactored dispatch. - Added merge() to all parent charts.
jamesleesaunders · Jan 17, 2018 · 94e7aa6 · 94e7aa6
1 parent 9bf4af0
commit 94e7aa6
Show file tree

Hide file tree

Showing 37 changed files with 260 additions and 198 deletions.
diff --git a/build/d3-ez.js b/build/d3-ez.js
diff --git a/build/d3-ez.min.js b/build/d3-ez.min.js
diff --git a/build/d3-ez.zip b/build/d3-ez.zip
diff --git a/examples/BarChartClusteredExample.html b/examples/BarChartClusteredExample.html
@@ -30,10 +30,10 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
+        .on("customValueMouseOver", function(d) {
           d3.select("#message").text(d.value);
         })
-        .on("customClick", function(d) {
+        .on("customSeriesClick", function(d) {
           console.log(d);
         });
 

diff --git a/examples/BarChartStackedExample.html b/examples/BarChartStackedExample.html
@@ -30,12 +30,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       // Add to page
       d3.select("#chartholder")

diff --git a/examples/BarChartVerticalExample.html b/examples/BarChartVerticalExample.html
@@ -28,12 +28,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d, i) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       // Add to page
       function update() {

diff --git a/examples/DonutChartExample.html b/examples/DonutChartExample.html
@@ -28,12 +28,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       // Add to page
       function update() {

diff --git a/examples/HeatMapRadialExample.html b/examples/HeatMapRadialExample.html
@@ -29,12 +29,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       // Convert json to d3-ez data format
       var data = d3.nest().key(function(d) {

diff --git a/examples/HtmlListExample.html b/examples/HtmlListExample.html
@@ -17,7 +17,7 @@
       // Create chart object
       var myList = d3.ez.component.htmlList()
         .classed("htmlList")
-        .on("customMouseOver", function(d) {
+        .on("customValueMouseOver", function(d) {
           console.log(d);
         });
 

diff --git a/examples/HtmlTableExample.html b/examples/HtmlTableExample.html
@@ -23,10 +23,10 @@
     // Create chart object
     var myTable = d3.ez.component.htmlTable()
       .width(600)
-			.on("customMouseOver", function(d) {
+			.on("customValueMouseOver", function(d) {
 				d3.select("#message").text(d.value);
 			})
-			.on("customClick", function(d) {
+			.on("customSeriesClick", function(d) {
 				console.log(d);
 			});
 

diff --git a/examples/LineChartExample.html b/examples/LineChartExample.html
@@ -64,12 +64,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       d3.select('#chartholder')
         .datum(data)

diff --git a/examples/PolarAreaChartExample.html b/examples/PolarAreaChartExample.html
@@ -28,12 +28,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       // Add to page
       function update() {

diff --git a/examples/PunchCardExample.html b/examples/PunchCardExample.html
@@ -29,12 +29,12 @@
         .chart(chart)
         .legend(legend)
         .title(title)
-        .on("customMouseOver", function(d) {
-          d3.select("#message").text(d.value);
-        })
-        .on("customClick", function(d) {
-          console.log(d);
-        });
+				.on("customValueMouseOver", function(d) {
+					d3.select("#message").text(d.value);
+				})
+				.on("customSeriesClick", function(d) {
+					console.log(d);
+				});
 
       // Convert json to d3-ez data format
       var data = d3.nest().key(function(d) {

diff --git a/examples/Showcase.html b/examples/Showcase.html
@@ -27,7 +27,7 @@
     // Setup chart components
     myChart1 = d3.ez.component.htmlTable()
       .width(400)
-      .on("customClick", function(d) {
+      .on("customSeriesClick", function(d) {
         update5(data);
         update2(d);
         update3(d);
@@ -37,7 +37,7 @@
     myChart2 = d3.ez.chart.barChartVertical()
       .width(400)
       .height(200)
-      .on("customMouseOver", function(d) {
+      .on("customValueMouseOver", function(d) {
         console.log(d);
       });
 
@@ -54,7 +54,7 @@
       .width(400)
       .height(200)
       .yAxisLabel("Fruit")
-      .on("customClick", function(d) {
+      .on("customSeriesClick", function(d) {
         update2(d);
         update3(d);
         update4(d);
@@ -75,7 +75,7 @@
       .minRadius(2)
       .useGlobalScale(true)
       .maxRadius(18)
-      .on("customMouseOver", function(d) {
+      .on("customValueMouseOver", function(d) {
         console.log(d);
       });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-ez",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "D3 Easy Reusable Chart Library",
   "license": "GPL-3.0",
   "keywords": [

diff --git a/src/chart.js b/src/chart.js
@@ -29,7 +29,7 @@ d3.ez.chart = function module() {
   var colorScale = undefined;
 
   // Dispatch (custom events)
-	var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick", "customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   function init(data) {
     canvasW = width - (margin.left + margin.right);

diff --git a/src/chart/barChartClustered.js b/src/chart/barChartClustered.js
@@ -35,7 +35,7 @@ d3.ez.chart.barChartClustered = function module() {
   var categoryNames;
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   // Other Customisation Options
   var yAxisLabel = null;
@@ -144,8 +144,11 @@ d3.ez.chart.barChartClustered = function module() {
         .classed("seriesGroup", true)
         .attr("transform", function(d) { return "translate(" + xScale(d.key) + ", 0)"; })
         .datum(function(d) { return d; })
+				.merge(seriesGroup)
         .call(barsVertical);
 
+			seriesGroup.exit()
+				.remove();
     });
   }
 

diff --git a/src/chart/barChartStacked.js b/src/chart/barChartStacked.js
@@ -35,7 +35,7 @@ d3.ez.chart.barChartStacked = function module() {
   var categoryNames;
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   // Other Customisation Options
   var yAxisLabel = null;
@@ -144,8 +144,11 @@ d3.ez.chart.barChartStacked = function module() {
         .classed("seriesGroup", true)
         .attr("transform", function(d) { return "translate(" + xScale(d.key) + ", 0)"; })
         .datum(function(d) { return d; })
+				.merge(seriesGroup)
         .call(barsStacked);
 
+			seriesGroup.exit()
+				.remove();
     });
   }
 

diff --git a/src/chart/barChartVertical.js b/src/chart/barChartVertical.js
@@ -28,7 +28,7 @@ d3.ez.chart.barChartVertical = function module() {
   var colorScale;
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   // Other Customisation Options
   var yAxisLabel;

diff --git a/src/chart/donutChart.js b/src/chart/donutChart.js
@@ -29,7 +29,7 @@ d3.ez.chart.donutChart = function module() {
   var categoryNames = [];
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   function init(data) {
     chartW = width - (margin.left + margin.right);

diff --git a/src/chart/heatMapRadial.js b/src/chart/heatMapRadial.js
@@ -35,7 +35,7 @@ d3.ez.chart.heatMapRadial = function module() {
   var thresholds;
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   function init(data) {
     chartW = width - (margin.left + margin.right);
@@ -122,15 +122,17 @@ d3.ez.chart.heatMapRadial = function module() {
         .dispatch(dispatch);
 
       var seriesGroup = chart.select(".circleRings").selectAll(".seriesGroup")
-        .data(function(d) { return d; })
-        .enter()
-        .append("g")
-        .attr("class", "seriesGroup");
+        .data(function(d) { return d; });
 
-      seriesGroup.datum(function(d) { return d; })
+			seriesGroup.enter()
+        .append("g")
+        .attr("class", "seriesGroup")
+				.merge(seriesGroup)
+				.datum(function(d) { return d; })
         .call(heatMapRing);
 
-      seriesGroup.exit().remove();
+      seriesGroup.exit()
+				.remove();
 
       // Circular Labels
       var circularLabels = d3.ez.component.circularLabels()

diff --git a/src/chart/lineChart.js b/src/chart/lineChart.js
@@ -32,7 +32,7 @@ d3.ez.chart.lineChart = function module() {
   var groupNames;
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   // Other Customisation Options
   var yAxisLabel = null;
@@ -147,26 +147,30 @@ d3.ez.chart.lineChart = function module() {
         .dispatch(dispatch);
 
       var lineGroup = chart.selectAll(".lineGroup")
-        .data(function(d) { return d; })
-        .enter().append("g")
-        .attr("class", "lineGroup")
-        .style("fill", function(d) { return colorScale(d.key); });
+        .data(function(d) { return d; });
 
-      lineGroup.datum(function(d) { return d; })
-        .call(lineChart).call(scatterPlot);
+			lineGroup.enter().append("g")
+        .attr("class", "lineGroup")
+        .style("fill", function(d) { return colorScale(d.key); })
+				.datum(function(d) { return d; })
+				.merge(lineGroup)
+				.call(lineChart).call(scatterPlot);
 
-      lineGroup.exit().remove();
+      lineGroup.exit()
+				.remove();
 
       var dotGroup = chart.selectAll(".dotGroup")
-        .data(function(d) { return d; })
-        .enter().append("g")
-        .attr("class", "dotGroup")
-        .style("fill", function(d) { return colorScale(d.key); });
+        .data(function(d) { return d; });
 
-      dotGroup.datum(function(d) { return d; })
-        .call(scatterPlot);
+			dotGroup.enter().append("g")
+        .attr("class", "dotGroup")
+        .style("fill", function(d) { return colorScale(d.key); })
+				.datum(function(d) { return d; })
+				.merge(gotGroup)
+				.call(scatterPlot);
 
-      dotGroup.exit().remove();
+      dotGroup.exit()
+				.remove();
     });
   }
 

diff --git a/src/chart/polarAreaChart.js b/src/chart/polarAreaChart.js
@@ -32,7 +32,7 @@ d3.ez.chart.polarAreaChart = function module() {
   var maxValue = 0;
 
   // Dispatch (Custom events)
-  var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");
+	var dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick");
 
   // Other Customisation Options
   var capitalizeLabels = false;