On click handlers behave differently in d3 v4

johnwalley · Oct 10, 2016 · e7c491c · e7c491c
1 parent 9f6df4c
commit e7c491c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-tube-map",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Draw tube map.",
   "keywords": [
     "d3",

diff --git a/src/tubeMap.js b/src/tubeMap.js
@@ -158,6 +158,14 @@ export default function() {
           // Update the interchanges
           interchanges.enter().append("g")
             .attr("id", function(d) { return d.name; })
+            .on("click", function() {
+              var label = d3.select(this);
+              var name = label.attr("id");
+
+              selectStation(name);
+
+              dispatch.call("click", this, name);
+            })
             .append("path")
             .attr("d", markerFunction)
             .attr("transform", function(d) { return "translate(" + xScale(d.x + d.marker[0].shiftX*lineWidthMultiplier) + "," + yScale(d.y + d.marker[0].shiftY*lineWidthMultiplier) + ")" })
@@ -174,6 +182,14 @@ export default function() {
           // Update the stations
           stations.enter().append("g")
             .attr("id", function(d) { return d.name; })
+            .on("click", function() {
+              var label = d3.select(this);
+              var name = label.attr("id");
+
+              selectStation(name);
+
+              dispatch.call("click", this, name);
+            })
             .append("path")
             .attr("d", function(d) {
               var dir;
@@ -222,6 +238,14 @@ export default function() {
             labels.enter().append("g")
               .attr("id", function(d) { return d.name; })
               .classed("label", true)
+              .on("click", function() {
+                var label = d3.select(this);
+                var name = label.attr("id");
+
+                selectStation(name);
+
+                dispatch.call("click", this, name);
+              })
               .append("text")
               .text(function(d) { return d.label })
               .attr("dy", 0.1)
@@ -257,32 +281,6 @@ export default function() {
               .attr("stroke", '#AAAAAA')
               .attr("stroke-width", lineWidth/4)
               .style("stroke-dasharray", ("3, 3"));
-
-            interchanges.on("click", function() {
-              var interchange = d3.select(this);
-              var name = interchange.attr("id");
-              selectStation(name);
-
-              dispatch.click(name);
-            });
-
-            stations.on("click", function() {
-              var station = d3.select(this);
-              var name = station.attr("id");
-
-              selectStation(name);
-
-              dispatch.click(name);
-            });
-
-            labels.on("click", function() {
-              var label = d3.select(this);
-              var name = label.attr("id");
-
-              selectStation(name);
-
-              dispatch.click(name);
-            });
       });
     }