jiahuang · fidlr · Mar 13, 2017 · Mar 19, 2017 · Mar 20, 2017 · Mar 20, 2017
diff --git a/examples/example.html b/examples/example.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
-  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+  <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
   <script src="../src/d3-timeline.js"></script>
 
   <style type="text/css">
@@ -115,8 +115,8 @@
       function timelineCircle() {
         var chart = d3.timeline()
           .tickFormat( //
-            {format: d3.time.format("%I %p"),
-            tickTime: d3.time.hours,
+            {format: d3.timeFormat("%I %p"),
+            tickTime: d3.timeHour,
             tickInterval: 1,
             tickSize: 30})
           .display("circle"); // toggle between rectangles and circles
@@ -190,7 +190,7 @@
 
       function timelineRectColors() {
 
-        var colorScale = d3.scale.ordinal().range(['#6b0000','#ef9b0f','#ffee00'])
+        var colorScale = d3.scaleOrdinal().range(['#6b0000','#ef9b0f','#ffee00'])
             .domain(['apple','orange','lemon']);
 
         var chart = d3.timeline()
@@ -202,7 +202,7 @@
       }
 
       function timelineRectColorsPerTime() {
-        var colorScale = d3.scale.ordinal().range(['#6b0000','#ef9b0f','#ffee00'])
+        var colorScale = d3.scaleOrdinal().range(['#6b0000','#ef9b0f','#ffee00'])
           .domain(['apple','orange','lemon']);
         var chart = d3.timeline()
           .colors( colorScale )
@@ -217,8 +217,8 @@
         var chart = d3.timeline()
           .relativeTime()
           .tickFormat({
-            format: function(d) { return d3.time.format("%H:%M")(d) },
-            tickTime: d3.time.minutes,
+            format: function(d) { return d3.timeFormat("%H:%M")(d) },
+            tickTime: d3.timeMinute,
             tickInterval: 30,
             tickSize: 15,
           });

diff --git a/src/d3-timeline.js b/src/d3-timeline.js
@@ -16,13 +16,13 @@
         height = null,
         rowSeparatorsColor = null,
         backgroundColor = null,
-        tickFormat = { format: d3.time.format("%I %p"),
-          tickTime: d3.time.hours,
+        tickFormat = { format: d3.timeFormat("%I %p"),
+          tickTime: d3.timeHour,
           tickInterval: 1,
           tickSize: 6,
           tickValues: null
         },
-        colorCycle = d3.scale.category20(),
+        colorCycle = d3.scaleOrdinal(d3.schemeCategory20),
         colorPropertyName = null,
         display = "rect",
         beginning = 0,
@@ -134,8 +134,9 @@
 
     var appendBac
8000
kgroundBar = function (yAxisMapping, index, g, data, datum) {
       var greenbarYAxis = ((itemHeight + itemMargin) * yAxisMapping[index]) + margin.top;
-      g.selectAll("svg").data(data).enter()
-        .insert("rect")
+      g.selectAll("svg")
+        .data(data).enter()
+        .insert("rect",":first-child")
         .attr("class", "row-green-bar")
         .attr("x", fullLengthBackgrounds ? 0 : margin.left)
         .attr("width", fullLengthBackgrounds ? width : (width - margin.right - margin.left))
@@ -153,14 +154,14 @@
         .attr("class", "timeline-label")
         .attr("transform", "translate(" + labelMargin + "," + rowsDown + ")")
         .text(hasLabel ? labelFunction(datum.label) : datum.id)
-        .on("click", function (d, i) { click(d, index, datum); });
+        .on("click", function (d, i) { click(d, index, datum, i); });
     };
 
     function timeline (gParent) {
       var g = gParent.append("g");
-      var gParentSize = gParent[0][0].getBoundingClientRect();
+      var gParentSize = gParent.node().getBoundingClientRect();
 
-      var gParentItem = d3.select(gParent[0][0]);
+      var gParentItem = d3.select(gParent);
 
       var yAxisMapping = {},
         maxStack = 1,
@@ -223,23 +224,21 @@
       var scaleFactor = (1/(ending - beginning)) * (width - margin.left - margin.right);
 
       // draw the axis
-      var xScale = d3.time.scale()
+      var xScale = d3.scaleTime()
         .domain([beginning, ending])
         .range([margin.left, width - margin.right]);
 
-      var xAxis = d3.svg.axis()
-        .scale(xScale)
-        .orient(orient)
-        .tickFormat(tickFormat.format)
+      var xAxis = (orient == "bottom") ? d3.axisBottom(xScale) : d3.axisTop(xScale);
+      xAxis.tickFormat(tickFormat.format)
         .tickSize(tickFormat.tickSize);
 
       if (tickFormat.tickValues != null) {
         xAxis.tickValues(tickFormat.tickValues);
       } else {
-        xAxis.ticks(tickFormat.numTicks || tickFormat.tickTime, tickFormat.tickInterval);
+        xAxis.tickArguments(tickFormat.numTicks || [tickFormat.tickTime, tickFormat.tickInterval]);
       }
 
-      // draw the chart
+      var viewport = g.append("g").attr("class","viewport");
       g.each(function(d, i) {
         chartData = d;
         d.forEach( function(datum, index){
@@ -253,9 +252,9 @@
 
           if (backgroundColor) { appendBackgroundBar(yAxisMapping, index, g, data, datum); }
 
-          g.selectAll("svg").data(data).enter()
+          viewport.selectAll("svg").data(data).enter()
             .append(function(d, i) {
-                return document.createElementNS(d3.ns.prefix.svg, "display" in d? d.display:display);
+                return document.createElementNS(d3.namespaces.svg, "display" in d? d.display:display);
             })
             .attr("x", getXPos)
             .attr("y", getStackPosition)
@@ -282,16 +281,16 @@
               return colorCycle(index);
             })
             .on("mousemove", function (d, i) {
-              hover(d, index, datum);
+              hover(d, index, datum, i);
             })
             .on("mouseover", function (d, i) {
-              mouseover(d, i, datum);
+              mouseover(d, i, datum, i);
             })
             .on("mouseout", function (d, i) {
-              mouseout(d, i, datum);
+              mouseout(d, i, datum, i);
             })
             .on("click", function (d, i) {
-              click(d, index, datum);
+              click(d, index, datum, i);
             })
             .attr("class", function (d, i) {
               return datum.class ? "timelineSeries_"+datum.class : "timelineSeries_"+index;
@@ -306,7 +305,7 @@
             })
           ;
 
-          g.selectAll("svg").data(data).enter()
+          viewport.selectAll("svg").data(data).enter()
             .append("text")
             .attr("x", getXTextPos)
             .attr("y", getStackTextPosition)
@@ -360,15 +359,32 @@
       if (showTimeAxis) { appendTimeAxis(g, xAxis, timeAxisYPosition); }
       if (timeAxisTick) { appendTimeAxisTick(g, xAxis, maxStack); }
 
-      if (width > gParentSize.width) {
+      if (width > gParentSize.width) { // only if the scrolling should be allowed
         var move = function() {
-          var x = Math.min(0, Math.max(gParentSize.width - width, d3.event.translate[0]));
-          zoom.translate([x, 0]);
-          g.attr("transform", "translate(" + x + ",0)");
-          scroll(x*scaleFactor, xScale);
+          g.select(".viewport")
+            .attr("transform", "translate(" + d3.event.transform.x + ",0)"
+                             + "scale(" + d3.event.transform.k + " 1)"); 
+          // translate the x-axis together with the data
+          g.selectAll(".axis")
+            .attr("transform", 
+              function(d) { 
+                return "translate(" + d3.event.transform.x + ", " + timeAxisYPosition + ")"
+                     + "scale(" + d3.event.transform.k + " 1)";
+                   }); 
+
+          new_xScale = d3.event.transform.rescaleX(xScale);                    
+          g.selectAll('.axis').call(function(d) {xAxis.scale(new_xScale);});
+
+          var xpos = -d3.event.transform.x;
+          scroll(xpos, xScale);          
         };
 
-        var zoom = d3.behavior.zoom().x(xScale).on("zoom", move);
+        var zoom = d3.zoom()
+                      .scaleExtent([scaleFactor, 10]) // max zoom 10
+                      .translateExtent([[0, 0], [width, 0]]) // don't allow translating y-axis
+                      .on("zoom", move);
+
+
 
         gParent
           .attr("class", "scrollable")
@@ -384,7 +400,7 @@
           });
       }
 
-      var gSize = g[0][0].getBoundingClientRect();
+      var gSize = g.node().getBoundingClientRect();
       setHeight();
 
       if (showBorderLine) {
@@ -413,37 +429,37 @@
       }
 
       function setHeight() {
-        if (!height && !gParentItem.attr("height")) {
+        if (!height && !gParentItem.height) {
           if (itemHeight) {
             // set height based off of item height
             height = gSize.height + gSize.top - gParentSize.top;
             // set bounding rectangle height
-            d3.select(gParent[0][0]).attr("height", height);
+            d3.select(gParent).node().attr("height", height);
           } else {
             throw "height of the timeline is not set";
           }
         } else {
           if (!height) {
-            height = gParentItem.attr("height");
+            height = gParentSize.height;
           } else {
-            gParentItem.attr("height", height);
+            gParentItem.node().attr("height", height);
           }
         }
       }
 
       function setWidth() {
         if (!width && !gParentSize.width) {
           try {
-            width = gParentItem.attr("width");
+            width = gParentItem.node().attr("width");
             if (!width) {
               throw "width of the timeline is not set. As of Firefox 27, timeline().with(x) needs to be explicitly set in order to render";
             }
           } catch (err) {
             console.log( err );
           }
-        } else if (!(width && gParentSize.width)) {
+        } else if (!width && gParentSize.width) {
           try {
-            width = gParentItem.attr("width");
+            width = gParentSize.width;
           } catch (err) {
             console.log( err );
           }