d3-line-chunked - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

build/d3-line-chunked.js

@@ -80,3 +80,3 @@ (function (global, factory) {
     'stroke-dasharray': '2 2',
-    'stroke-opacity': 0.2
+    'stroke-opacity': 0.35
   };
@@ -254,7 +254,9 @@ var defaultPointAttrs = {
 
+    // read in properties about the transition if we have one
+    var transitionDuration = transition ? context.duration() : 0;
+    var transitionDelay = transition ? context.delay() : 0;
+
     // EXIT
     if (transition) {
-      var duration = context.duration();
-
-      circles.exit().transition().duration(duration * 0.05).attr('r', 1e-6).remove();
+      circles.exit().transition().delay(transitionDelay).duration(transitionDuration * 0.05).attr('r', 1e-6).remove();
     } else {
@@ -293,6 +295,6 @@ circles.exit().remove();
     if ((!initialRender || initialRender && transitionInitial) && transition) {
-      var _duration = context.duration();
-      var enterDuration = _duration * 0.15;
+      var enterDuration = transitionDuration * 0.15;
+
       // delay sizing up the radius until after the line transition
-      circlesEnter.transition(context).delay(_duration - enterDuration).duration(enterDuration).attr('r', combinedAttrs.r);
+      circlesEnter.transition(context).delay(transitionDelay + (transitionDuration - enterDuration)).duration(enterDuration).attr('r', combinedAttrs.r);
     } else {
@@ -680,3 +682,3 @@ circlesEnter.attr('r', combinedAttrs.r);
           // use random ID so they are treated as entering/exiting each time
-          id: Math.random(),
+          id: x(segment[0]),
           data: segment[0]
@@ -723,10 +725,12 @@ };
     return function getSet(newValue) {
-      // main setter if setType matches newValue type
-      if (!setType && newValue != null || setType && (typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) === setType) {
-        set(newValue);
-        return lineChunked;
+      if (arguments.length) {
+        // main setter if setType matches newValue type
+        if (!setType && newValue != null || setType && (typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) === setType) {
+          set(newValue);
 
-        // setter to constant function if provided
-      } else if (asConstant && newValue != null) {
-        set(asConstant(newValue));
+          // setter to constant function if provided
+        } else if (asConstant && newValue != null) {
+          set(asConstant(newValue));
+        }
+
         return lineChunked;
@@ -733,0 +737,0 @@ }

build/d3-line-chunked.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-array"),require("d3-selection"),require("d3-shape"),require("d3-interpolate-path")):"function"==typeof define&&define.amd?define(["exports","d3-array","d3-selection","d3-shape","d3-interpolate-path"],e):e(t.d3=t.d3||{},t.d3,t.d3,t.d3,t.d3)}(this,function(t,e,n,r,i){"use strict";function o(){function t(t){var e=!0,n=t.reduce(function(t,n){if(!x(n))return e=!0,t;if(e)t.push([n]),e=!1;else{var r=t[t.length-1],i=r[r.length-1];T(i,n)?r.push(n):t.push([n])}return t},[]);return n}function o(t,e,n,r,i,o,u){var a=r.selectAll("circle").data(i,function(t){return t.id});if(e){var c=n.duration();a.exit().transition().duration(.05*c).attr("r",1e-6).remove()}else a.exit().remove();var f=a.enter().append("circle"),l=Object.assign({fill:o.line.stroke,r:null==o.line["stroke-width"]?void 0:parseFloat(o.line["stroke-width"])+1},o.point);Object.keys(l).forEach(function(t){f.attr(t,l[t])}),l.r=parseFloat(l.r);var s=Object.assign(null==o.point.fill?{fill:u.line.stroke}:{},u.point);if(Object.keys(s).forEach(function(t){f.style(t,s[t])}),f.classed("d3-line-chunked-defined-point",!0).attr("r",1e-6).attr("cx",function(t){return b(t.data)}).attr("cy",function(t){return k(t.data)}),(!t||t&&F)&&e){var d=n.duration(),p=.15*d;f.transition(n).delay(d-p).duration(p).attr("r",l.r)}else f.attr("r",l.r);e&&(a=a.transition(n)),a.attr("r",l.r).attr("cx",function(t){return b(t.data)}).attr("cy",function(t){return k(t.data)})}function l(t){var e="d3-line-chunked-clip-path-"+f;return t&&(f+=1),e}function s(t,e,r,i,o,u,c,f,s,d){function p(t){t.attr("x",function(t){var e=b(t[0]);return e===h?e-S:e}).attr("width",function(t){var e=b(t[0]),n=b(t[t.length-1]);return e===h&&(e-=S),n===v&&(n+=S),n-e}).attr("y",E).attr("height",C)}var y=a(c,2),h=y[0],v=y[1],g=a(f,2),m=g[0],k=g[1],x=l(!0),T=i.select("clipPath"),j=i.select(".d3-line-chunked-debug");M&&j.empty()?j=i.append("g").classed("d3-line-chunked-debug",!0):M||j.empty()||j.remove(),T.empty()?T=i.append("defs").append("clipPath").attr("id",x):T.attr("id",x);var w=T.selectAll("rect").data(u),A=void 0;M&&(A=j.selectAll("rect").data(u));var O=parseFloat(d.line["stroke-width"]||i.select(".d3-line-chunked-defined").style("stroke-width")||s.line["stroke-width"]),S=O,E=m-S,C=k+S-(m-S),F=void 0;if(e)!function(){var t=function(t,e){var n=b(t[0]),r=b(t[t.length-1]),i=n+(r-n)/2,o=e.find(function(t){return t[0]<=i&&i<=t[1]});return o?[Math.max(o[0],n),Math.min(r,o[1])]:[i,i]},e=function(e){e.attr("x",function(e){return t(e,c)[0]}).attr("width",function(e){var n=t(e,c),r=a(n,2),i=r[0],o=r[1];return o-i})},i=function(e){e.attr("x",function(e){return t(e,F)[0]}).attr("width",function(e){var n=t(e,F),r=a(n,2),i=r[0],o=r[1];return o-i}).attr("y",E).attr("height",C)},o=T.selectAll("rect").nodes();F=o.length?o.map(function(t){var e=n.select(t),r=parseFloat(e.attr("x")),i=parseFloat(e.attr("width"))+r;return[r,i]}):[[h,v]];var c=void 0;c=u.length?u.map(function(t){var e=b(t[0]),n=b(t[t.length-1]);return[e,n]}):[[0,0]],w.exit().transition(r).call(e).remove();var f=w.enter().append("rect").call(i);if(w=w.merge(f),w=w.transition(r),M){A.exit().transition(r).call(e).remove();var l=A.enter().append("rect").style("fill","rgba(255, 0, 0, 0.3)").style("stroke","rgba(255, 0, 0, 0.6)").call(i);A=A.merge(l),A=A.transition(r)}}();else{w.exit().remove();var P=w.enter().append("rect");if(w=w.merge(P),M){A.exit().remove();var q=A.enter().append("rect").style("fill","rgba(255, 0, 0, 0.3)").style("stroke","rgba(255, 0, 0, 0.6)");A=A.merge(q)}}w.call(p),M&&A.call(p)}function d(t,e,o,u,f,s,d,p,y,h){var v=a(d,2),g=(v[0],v[1],a(p,2)),m=(g[0],g[1]),x=u.select(".d3-line-chunked-defined"),T=u.select(".d3-line-chunked-undefined"),w=r.line().x(b).y(k).curve(j);if(x.empty()&&(x=u.append("path"),T=u.append("path")),x.attr("clip-path","url(#"+l(!1)+")"),P&&f.length){var A=f.map(function(t){return[b(t),k(t)]});f=[[P[0],A[0][1]]].concat(c(A),[[P[1],A[A.length-1][1]]]),w=r.line().curve(j)}t&&!function(){var t=w;F&&(t=r.line().x(b).y(m).curve(j),P&&(t=r.line().y(m).curve(j))),x.attr("d",function(){return t(f)}),T.attr("d",function(){return t(f)})}(),Object.keys(y.line).forEach(function(t){x.attr(t,y.line[t]),T.attr(t,y.line[t])}),Object.keys(h.line).forEach(function(t){x.style(t,h.line[t]),T.style(t,h.line[t])}),x.classed("d3-line-chunked-defined",!0),Object.keys(y.gap).forEach(function(t){T.attr(t,y.gap[t])}),Object.keys(h.gap).forEach(function(t){T.style(t,h.gap[t])}),T.classed("d3-line-chunked-undefined",!0),e&&(x=x.transition(o),T=T.transition(o)),x.attrTween?(x.attrTween("d",function(){var t=n.select(this).attr("d"),e=w(f);return i.interpolatePath(t,e)}),T.attrTween("d",function(){var t=n.select(this).attr("d"),e=w(f);return i.interpolatePath(t,e)})):(x.attr("d",function(){return w(f)}),T.attr("d",function(){return w(f)}))}function p(t,e,n,r,i){function o(t){return Object.keys(t).reduce(function(e,n){var o=t[n];return"function"==typeof o&&(o=o(r,i)),e[n]=o,e},{})}return{line:o(t),gap:o(e),point:o(n)}}function y(r){if(r){var i=r.selection?r.selection():r;if(i&&!i.empty()){var u=!1;i!==r&&(u=!0),i.each(function(i,a){var c=n.select(this),f=q(i),l=t(f),y=l.filter(function(t){return 1===t.length}).map(function(t){return{id:Math.random(),data:t[0]}}),h=f.filter(x),v=e.extent(h.map(function(t){return k(t)})),g=e.extent(h.map(function(t){return b(t)})),m=p(A,S,C,i,a),T=p(w,O,E,i,a),j=c.select(".d3-line-chunked-defined").empty();o(j,u,r,c,y,m,T),d(j,u,r,c,h,l,g,v,m,T),s(j,u,r,c,h,l,g,v,m,T)})}}}function h(t){var e=t.get,n=t.set,r=t.setType,i=t.asConstant;return function(t){return!r&&null!=t||r&&("undefined"==typeof t?"undefined":u(t))===r?(n(t),y):i&&null!=t?(n(i(t)),y):e()}}var v={fill:"none",stroke:"#222","stroke-width":1.5,"stroke-opacity":1},g={"stroke-dasharray":"2 2","stroke-opacity":.2},m={},b=function(t){return t[0]},k=function(t){return t[1]},x=function(){return!0},T=function(){return!0},j=r.curveLinear,w={},A=v,O={},S=g,E={},C=m,F=!0,P=void 0,q=function(t){return t},M=!1;return y.x=h({get:function(){return b},set:function(t){b=t},setType:"function",asConstant:function(t){return function(){return+t}}}),y.y=h({get:function(){return k},set:function(t){k=t},setType:"function",asConstant:function(t){return function(){return+t}}}),y.defined=h({get:function(){return x},set:function(t){x=t},setType:"function",asConstant:function(t){return function(){return!!t}}}),y.isNext=h({get:function(){return T},set:function(t){T=t},setType:"function",asConstant:function(t){return function(){return!!t}}}),y.curve=h({get:function(){return j},set:function(t){j=t},setType:"function"}),y.lineStyles=h({get:function(){return w},set:function(t){w=t},setType:"object"}),y.gapStyles=h({get:function(){return O},set:function(t){O=t},setType:"object"}),y.pointStyles=h({get:function(){return E},set:function(t){E=t},setType:"object"}),y.lineAttrs=h({get:function(){return A},set:function(t){A=t},setType:"object"}),y.gapAttrs=h({get:function(){return S},set:function(t){S=t},setType:"object"}),y.pointAttrs=h({get:function(){return C},set:function(t){C=t},setType:"object"}),y.transitionInitial=h({get:function(){return F},set:function(t){F=t},setType:"boolean"}),y.extendEnds=h({get:function(){return P},set:function(t){P=t},setType:"object"}),y.accessData=h({get:function(){return q},set:function(t){q=t},setType:"function",asConstant:function(t){return function(e){return e[t]}}}),y.debug=h({get:function(){return M},set:function(t){M=t},setType:"boolean"}),y}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},a=function(){function t(t,e){var n=[],r=!0,i=!1,o=void 0;try{for(var u,a=t[Symbol.iterator]();!(r=(u=a.next()).done)&&(n.push(u.value),!e||n.length!==e);r=!0);}catch(t){i=!0,o=t}finally{try{!r&&a.return&&a.return()}finally{if(i)throw o}}return n}return function(e,n){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),c=function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)},f=0;t.lineChunked=o,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-array"),require("d3-selection"),require("d3-shape"),require("d3-interpolate-path")):"function"==typeof define&&define.amd?define(["exports","d3-array","d3-selection","d3-shape","d3-interpolate-path"],e):e(t.d3=t.d3||{},t.d3,t.d3,t.d3,t.d3)}(this,function(t,e,n,r,i){"use strict";function o(){function t(t){var e=!0,n=t.reduce(function(t,n){if(!x(n))return e=!0,t;if(e)t.push([n]),e=!1;else{var r=t[t.length-1],i=r[r.length-1];T(i,n)?r.push(n):t.push([n])}return t},[]);return n}function o(t,e,n,r,i,o,u){var a=r.selectAll("circle").data(i,function(t){return t.id}),c=e?n.duration():0,f=e?n.delay():0;e?a.exit().transition().delay(f).duration(.05*c).attr("r",1e-6).remove():a.exit().remove();var l=a.enter().append("circle"),s=Object.assign({fill:o.line.stroke,r:null==o.line["stroke-width"]?void 0:parseFloat(o.line["stroke-width"])+1},o.point);Object.keys(s).forEach(function(t){l.attr(t,s[t])}),s.r=parseFloat(s.r);var d=Object.assign(null==o.point.fill?{fill:u.line.stroke}:{},u.point);if(Object.keys(d).forEach(function(t){l.style(t,d[t])}),l.classed("d3-line-chunked-defined-point",!0).attr("r",1e-6).attr("cx",function(t){return m(t.data)}).attr("cy",function(t){return k(t.data)}),(!t||t&&F)&&e){var p=.15*c;l.transition(n).delay(f+(c-p)).duration(p).attr("r",s.r)}else l.attr("r",s.r);e&&(a=a.transition(n)),a.attr("r",s.r).attr("cx",function(t){return m(t.data)}).attr("cy",function(t){return k(t.data)})}function l(t){var e="d3-line-chunked-clip-path-"+f;return t&&(f+=1),e}function s(t,e,r,i,o,u,c,f,s,d){function p(t){t.attr("x",function(t){var e=m(t[0]);return e===h?e-S:e}).attr("width",function(t){var e=m(t[0]),n=m(t[t.length-1]);return e===h&&(e-=S),n===v&&(n+=S),n-e}).attr("y",E).attr("height",C)}var y=a(c,2),h=y[0],v=y[1],g=a(f,2),b=g[0],k=g[1],x=l(!0),T=i.select("clipPath"),j=i.select(".d3-line-chunked-debug");M&&j.empty()?j=i.append("g").classed("d3-line-chunked-debug",!0):M||j.empty()||j.remove(),T.empty()?T=i.append("defs").append("clipPath").attr("id",x):T.attr("id",x);var w=T.selectAll("rect").data(u),A=void 0;M&&(A=j.selectAll("rect").data(u));var O=parseFloat(d.line["stroke-width"]||i.select(".d3-line-chunked-defined").style("stroke-width")||s.line["stroke-width"]),S=O,E=b-S,C=k+S-(b-S),F=void 0;if(e)!function(){var t=function(t,e){var n=m(t[0]),r=m(t[t.length-1]),i=n+(r-n)/2,o=e.find(function(t){return t[0]<=i&&i<=t[1]});return o?[Math.max(o[0],n),Math.min(r,o[1])]:[i,i]},e=function(e){e.attr("x",function(e){return t(e,c)[0]}).attr("width",function(e){var n=t(e,c),r=a(n,2),i=r[0],o=r[1];return o-i})},i=function(e){e.attr("x",function(e){return t(e,F)[0]}).attr("width",function(e){var n=t(e,F),r=a(n,2),i=r[0],o=r[1];return o-i}).attr("y",E).attr("height",C)},o=T.selectAll("rect").nodes();F=o.length?o.map(function(t){var e=n.select(t),r=parseFloat(e.attr("x")),i=parseFloat(e.attr("width"))+r;return[r,i]}):[[h,v]];var c=void 0;c=u.length?u.map(function(t){var e=m(t[0]),n=m(t[t.length-1]);return[e,n]}):[[0,0]],w.exit().transition(r).call(e).remove();var f=w.enter().append("rect").call(i);if(w=w.merge(f),w=w.transition(r),M){A.exit().transition(r).call(e).remove();var l=A.enter().append("rect").style("fill","rgba(255, 0, 0, 0.3)").style("stroke","rgba(255, 0, 0, 0.6)").call(i);A=A.merge(l),A=A.transition(r)}}();else{w.exit().remove();var P=w.enter().append("rect");if(w=w.merge(P),M){A.exit().remove();var q=A.enter().append("rect").style("fill","rgba(255, 0, 0, 0.3)").style("stroke","rgba(255, 0, 0, 0.6)");A=A.merge(q)}}w.call(p),M&&A.call(p)}function d(t,e,o,u,f,s,d,p,y,h){var v=a(d,2),g=(v[0],v[1],a(p,2)),b=(g[0],g[1]),x=u.select(".d3-line-chunked-defined"),T=u.select(".d3-line-chunked-undefined"),w=r.line().x(m).y(k).curve(j);if(x.empty()&&(x=u.append("path"),T=u.append("path")),x.attr("clip-path","url(#"+l(!1)+")"),P&&f.length){var A=f.map(function(t){return[m(t),k(t)]});f=[[P[0],A[0][1]]].concat(c(A),[[P[1],A[A.length-1][1]]]),w=r.line().curve(j)}t&&!function(){var t=w;F&&(t=r.line().x(m).y(b).curve(j),P&&(t=r.line().y(b).curve(j))),x.attr("d",function(){return t(f)}),T.attr("d",function(){return t(f)})}(),Object.keys(y.line).forEach(function(t){x.attr(t,y.line[t]),T.attr(t,y.line[t])}),Object.keys(h.line).forEach(function(t){x.style(t,h.line[t]),T.style(t,h.line[t])}),x.classed("d3-line-chunked-defined",!0),Object.keys(y.gap).forEach(function(t){T.attr(t,y.gap[t])}),Object.keys(h.gap).forEach(function(t){T.style(t,h.gap[t])}),T.classed("d3-line-chunked-undefined",!0),e&&(x=x.transition(o),T=T.transition(o)),x.attrTween?(x.attrTween("d",function(){var t=n.select(this).attr("d"),e=w(f);return i.interpolatePath(t,e)}),T.attrTween("d",function(){var t=n.select(this).attr("d"),e=w(f);return i.interpolatePath(t,e)})):(x.attr("d",function(){return w(f)}),T.attr("d",function(){return w(f)}))}function p(t,e,n,r,i){function o(t){return Object.keys(t).reduce(function(e,n){var o=t[n];return"function"==typeof o&&(o=o(r,i)),e[n]=o,e},{})}return{line:o(t),gap:o(e),point:o(n)}}function y(r){if(r){var i=r.selection?r.selection():r;if(i&&!i.empty()){var u=!1;i!==r&&(u=!0),i.each(function(i,a){var c=n.select(this),f=q(i),l=t(f),y=l.filter(function(t){return 1===t.length}).map(function(t){return{id:m(t[0]),data:t[0]}}),h=f.filter(x),v=e.extent(h.map(function(t){return k(t)})),g=e.extent(h.map(function(t){return m(t)})),b=p(A,S,C,i,a),T=p(w,O,E,i,a),j=c.select(".d3-line-chunked-defined").empty();o(j,u,r,c,y,b,T),d(j,u,r,c,h,l,g,v,b,T),s(j,u,r,c,h,l,g,v,b,T)})}}}function h(t){var e=t.get,n=t.set,r=t.setType,i=t.asConstant;return function(t){return arguments.length?(!r&&null!=t||r&&("undefined"==typeof t?"undefined":u(t))===r?n(t):i&&null!=t&&n(i(t)),y):e()}}var v={fill:"none",stroke:"#222","stroke-width":1.5,"stroke-opacity":1},g={"stroke-dasharray":"2 2","stroke-opacity":.35},b={},m=function(t){return t[0]},k=function(t){return t[1]},x=function(){return!0},T=function(){return!0},j=r.curveLinear,w={},A=v,O={},S=g,E={},C=b,F=!0,P=void 0,q=function(t){return t},M=!1;return y.x=h({get:function(){return m},set:function(t){m=t},setType:"function",asConstant:function(t){return function(){return+t}}}),y.y=h({get:function(){return k},set:function(t){k=t},setType:"function",asConstant:function(t){return function(){return+t}}}),y.defined=h({get:function(){return x},set:function(t){x=t},setType:"function",asConstant:function(t){return function(){return!!t}}}),y.isNext=h({get:function(){return T},set:function(t){T=t},setType:"function",asConstant:function(t){return function(){return!!t}}}),y.curve=h({get:function(){return j},set:function(t){j=t},setType:"function"}),y.lineStyles=h({get:function(){return w},set:function(t){w=t},setType:"object"}),y.gapStyles=h({get:function(){return O},set:function(t){O=t},setType:"object"}),y.pointStyles=h({get:function(){return E},set:function(t){E=t},setType:"object"}),y.lineAttrs=h({get:function(){return A},set:function(t){A=t},setType:"object"}),y.gapAttrs=h({get:function(){return S},set:function(t){S=t},setType:"object"}),y.pointAttrs=h({get:function(){return C},set:function(t){C=t},setType:"object"}),y.transitionInitial=h({get:function(){return F},set:function(t){F=t},setType:"boolean"}),y.extendEnds=h({get:function(){return P},set:function(t){P=t},setType:"object"}),y.accessData=h({get:function(){return q},set:function(t){q=t},setType:"function",asConstant:function(t){return function(e){return e[t]}}}),y.debug=h({get:function(){return M},set:function(t){M=t},setType:"boolean"}),y}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},a=function(){function t(t,e){var n=[],r=!0,i=!1,o=void 0;try{for(var u,a=t[Symbol.iterator]();!(r=(u=a.next()).done)&&(n.push(u.value),!e||n.length!==e);r=!0);}catch(t){i=!0,o=t}finally{try{!r&&a.return&&a.return()}finally{if(i)throw o}}return n}return function(e,n){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),c=function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)},f=0;t.lineChunked=o,Object.defineProperty(t,"__esModule",{value:!0})});

example/d3-interpolate-path.js

@@ -187,11 +187,11 @@ (function (global, factory) {
 function interpolatePath(a, b) {
-  var aNormalized = a == null ? null : a.replace(/[Z]/gi, '');
-  var bNormalized = b == null ? null : b.replace(/[Z]/gi, '');
-  var aPoints = aNormalized == null ? [] : aNormalized.split(/(?=[MLCSTQAHV])/gi);
-  var bPoints = bNormalized == null ? [] : bNormalized.split(/(?=[MLCSTQAHV])/gi);
+  var aNormalized = a == null ? '' : a.replace(/[Z]/gi, '');
+  var bNormalized = b == null ? '' : b.replace(/[Z]/gi, '');
+  var aPoints = aNormalized === '' ? [] : aNormalized.split(/(?=[MLCSTQAHV])/gi);
+  var bPoints = bNormalized === '' ? [] : bNormalized.split(/(?=[MLCSTQAHV])/gi);
 
-  // if both are empty, interpolation is always null.
+  // if both are empty, interpolation is always the empty string.
   if (!aPoints.length && !bPoints.length) {
     return function nullInterpolator() {
-      return null;
+      return '';
     };
@@ -249,3 +249,3 @@ }
     if (t === 1) {
-      return b;
+      return b == null ? '' : b;
     }
@@ -252,0 +252,0 @@

example/d3-line-chunked.js

@@ -80,3 +80,3 @@ (function (global, factory) {
     'stroke-dasharray': '2 2',
-    'stroke-opacity': 0.2
+    'stroke-opacity': 0.35
   };
@@ -254,7 +254,9 @@ var defaultPointAttrs = {
 
+    // read in properties about the transition if we have one
+    var transitionDuration = transition ? context.duration() : 0;
+    var transitionDelay = transition ? context.delay() : 0;
+
     // EXIT
     if (transition) {
-      var duration = context.duration();
-
-      circles.exit().transition().duration(duration * 0.05).attr('r', 1e-6).remove();
+      circles.exit().transition().delay(transitionDelay).duration(transitionDuration * 0.05).attr('r', 1e-6).remove();
     } else {
@@ -293,6 +295,6 @@ circles.exit().remove();
     if ((!initialRender || initialRender && transitionInitial) && transition) {
-      var _duration = context.duration();
-      var enterDuration = _duration * 0.15;
+      var enterDuration = transitionDuration * 0.15;
+
       // delay sizing up the radius until after the line transition
-      circlesEnter.transition(context).delay(_duration - enterDuration).duration(enterDuration).attr('r', combinedAttrs.r);
+      circlesEnter.transition(context).delay(transitionDelay + (transitionDuration - enterDuration)).duration(enterDuration).attr('r', combinedAttrs.r);
     } else {
@@ -680,3 +682,3 @@ circlesEnter.attr('r', combinedAttrs.r);
           // use random ID so they are treated as entering/exiting each time
-          id: Math.random(),
+          id: x(segment[0]),
           data: segment[0]
@@ -723,10 +725,12 @@ };
     return function getSet(newValue) {
-      // main setter if setType matches newValue type
-      if (!setType && newValue != null || setType && (typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) === setType) {
-        set(newValue);
-        return lineChunked;
+      if (arguments.length) {
+        // main setter if setType matches newValue type
+        if (!setType && newValue != null || setType && (typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) === setType) {
+          set(newValue);
 
-        // setter to constant function if provided
-      } else if (asConstant && newValue != null) {
-        set(asConstant(newValue));
+          // setter to constant function if provided
+        } else if (asConstant && newValue != null) {
+          set(asConstant(newValue));
+        }
+
         return lineChunked;
@@ -733,0 +737,0 @@ }

example/example-gallery.js

@@ -460,2 +460,72 @@ /* eslint-disable */
     },
+    {
+      label: 'Transition: null to null',
+      render: function typicalExample(root) {
+        var g = root.append('svg')
+          .attr('width', exampleWidth)
+          .attr('height', exampleHeight)
+          .append('g');
+
+        var chunked = d3.lineChunked()
+          .x(function (d) { return x(d[0]); })
+          .y(function (d) { return y(d[1]); })
+          .defined(function (d) { return d[1] !== null; });
+
+        var data = [[0, null]];
+
+        g.datum(data).call(chunked).transition().call(chunked);
+      },
+    },
+    {
+      label: 'Transition: has point same X location',
+      transition: true,
+      render: function fromPoint(root) {
+        var g = root.append('svg')
+          .attr('width', exampleWidth)
+          .attr('height', exampleHeight)
+          .append('g');
+
+        var chunked = d3.lineChunked()
+          .x(function (d) { return x(d[0]); })
+          .y(function (d) { return y(d[1]); })
+          .defined(function (d) { return d[1] !== null; })
+          .debug(transitionDebug)
+          .transitionInitial(false);
+
+        var dataStart = [[0, 1], [2, 2], [4, 1], [5, null], [6, 2], [7, null], [8, 2], [9, 0]];
+        var dataEnd = [[0, 1], [2, 2], [4, 1], [5, null], [6, 0], [7, null], [8, 2], [9, 0]];
+
+        g.datum(dataStart).call(chunked);
+        setTimeout(function () {
+          g.datum(dataEnd).transition().duration(transitionDuration).call(chunked);
+        }, transitionDuration / 4);
+      },
+    },
+    {
+      label: 'Transition: transition has delay',
+      transition: true,
+      render: function fromPoint(root) {
+        var g = root.append('svg')
+          .attr('width', exampleWidth)
+          .attr('height', exampleHeight)
+          .append('g');
+
+        var chunked = d3.lineChunked()
+          .x(function (d) { return x(d[0]); })
+          .y(function (d) { return y(d[1]); })
+          .defined(function (d) { return d[1] !== null; })
+          .isNext(function (prev, curr) { return curr[0] === prev[0] + 1; })
+          .debug(transitionDebug)
+          .transitionInitial(false);
+
+        var dataStart = [[0, 1], [2, 2], [4, 1], [5, null], [6, 2], [7, null], [8, 2], [9, 0]];
+        var dataEnd = [[0, 1], [1, 2], [3, 0], [4, 1], [6, 3], [7, 2], [9, 1], [10, 1]];
+
+        g.datum(dataStart).call(chunked);
+        setTimeout(function () {
+          g.datum(dataEnd).transition().delay(2000).duration(transitionDuration).call(chunked);
+        }, transitionDuration / 4);
+      },
+    },
+
   ];
@@ -462,0 +532,0 @@

package.json

 {
   "name": "d3-line-chunked",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A d3 plugin that renders a line with potential gaps in the data by styling the gaps differently from the defined areas. Single points are rendered as circles. Transitions are supported.",
@@ -49,3 +49,3 @@ "author": "Peter Beshai <[e-mail]> (http://github.com/pbeshai)",
     "d3-interpolate": "^1.1.1",
-    "d3-interpolate-path": "^1.0.0",
+    "d3-interpolate-path": "^1.0.1",
     "d3-selection": "^1.0.2",
@@ -52,0 +52,0 @@ "d3-shape": "^1.0.3",

README.md

@@ -58,3 +58,2 @@ # d3-line-chunked
   .transition()
-  .duration(transitionDuration / 3)
   .call(lineChunked);
@@ -61,0 +60,0 @@

src/lineChunked.js

@@ -23,3 +23,3 @@ import { extent } from 'd3-array';
     'stroke-dasharray': '2 2',
-    'stroke-opacity': 0.2,
+    'stroke-opacity': 0.35,
   };
@@ -186,9 +186,12 @@ const defaultPointAttrs = {
 
+    // read in properties about the transition if we have one
+    const transitionDuration = transition ? context.duration() : 0;
+    const transitionDelay = transition ? context.delay() : 0;
+
     // EXIT
     if (transition) {
-      const duration = context.duration();
-
       circles.exit()
         .transition()
-        .duration(duration * 0.05)
+        .delay(transitionDelay)
+        .duration(transitionDuration * 0.05)
         .attr('r', 1e-6)
@@ -232,8 +235,8 @@ .remove();
     if ((!initialRender || (initialRender && transitionInitial)) && transition) {
-      const duration = context.duration();
-      const enterDuration = duration * 0.15;
+      const enterDuration = transitionDuration * 0.15;
+
       // delay sizing up the radius until after the line transition
       circlesEnter
         .transition(context)
-        .delay(duration - enterDuration)
+        .delay(transitionDelay + (transitionDuration - enterDuration))
         .duration(enterDuration)
@@ -589,3 +592,3 @@ .attr('r', combinedAttrs.r);
           // use random ID so they are treated as entering/exiting each time
-          id: Math.random(),
+          id: x(segment[0]),
           data: segment[0],
@@ -625,10 +628,12 @@ }));
     return function getSet(newValue) {
-      // main setter if setType matches newValue type
-      if ((!setType && newValue != null) || (setType && typeof newValue === setType)) {
-        set(newValue);
-        return lineChunked;
+      if (arguments.length) {
+        // main setter if setType matches newValue type
+        if ((!setType && newValue != null) || (setType && typeof newValue === setType)) {
+          set(newValue);
 
-      // setter to constant function if provided
-      } else if (asConstant && newValue != null) {
-        set(asConstant(newValue));
+        // setter to constant function if provided
+        } else if (asConstant && newValue != null) {
+          set(asConstant(newValue));
+        }
+
         return lineChunked;
@@ -635,0 +640,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

141805

increased by2.5%

Number of package files

18

increased by5.88%

Lines of code

3033

increased by2.26%

Worsened metrics

Number of lines in readme file

245

decreased by-0.41%

Dependency changes

• Updatedd3-interpolate-path@^1.0.1