@decidables/discountable-elements 0.5.0 → 0.6.0

package/lib/discountableElements.umd.js

@@ -13065,54 +13065,90 @@
           /* shape-rendering: crispEdges; */
         }
 
-        .curve {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+        .option .interactive {
+          filter: url("#shadow-2");
         }
 
-        .curve.interactive {
-          cursor: nwse-resize;
-          
-          filter: url("#shadow-2");
-          outline: none;
+        .option .interactive:hover {
+          filter: url("#shadow-4");
         }
 
-        .curve.interactive:hover {
+        .option .body.interactive:has(~ .point:hover) {
           filter: url("#shadow-4");
         }
 
-        .curve.interactive:active {
+        .option .interactive:active {
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
         }
 
-        .bar {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+        :host(.keyboard) .option .interactive:focus-within {
+          filter: url("#shadow-8");
         }
 
-        .bar.interactive {
-          cursor: ew-resize;
-          
-          filter: url("#shadow-2");
+        :host(.keyboard) .option .body.interactive:has(~ .point:focus-within) {
+          filter: url("#shadow-8");
+        }
+
+        .gradient.sooner stop {
+          stop-color: var(---color-sooner);
+        }
+
+        .gradient.later stop {
+          stop-color: var(---color-later);
+        }
+
+        .stop-0,
+        .stop-before {
+          stop-opacity: 0;
+        }
+
+        .stop-after,
+        .stop-100 {
+          stop-opacity: 1;
+        }
+
+        .fill {
+          fill: var(---color-element-enabled);
+          fill-opacity: 0.5;
+          stroke: none;
+        }
+
+        .interactive .fill {
+          cursor: move;
+
           outline: none;
         }
 
-        .bar.interactive:hover {
-          filter: url("#shadow-4");
+        .sooner .fill {
+          fill: var(---color-sooner);
         }
 
-        .bar.interactive:active {
-          filter: url("#shadow-8");
+        .later .fill {
+          fill: var(---color-later);
         }
 
-        :host(.keyboard) .bar.interactive:focus {
-          filter: url("#shadow-8");
+        .trial.sooner .fill {
+          fill: url("#sooner-gradient");
+        }
+
+        .trial.later .fill {
+          fill: url("#later-gradient");
+        }
+
+        .bar {
+          fill: none;
+          stroke: var(---color-element-emphasis);
+          stroke-width: 2;
+        }
+
+        .interactive .bar {
+          cursor: ew-resize;
+
+          outline: none;
         }
 
         .point .mark {
@@ -13130,38 +13166,22 @@
           fill: var(---color-text-inverse);
         }
 
-        .point.interactive {
+        .point.interact {
           cursor: ns-resize;
 
-          filter: url("#shadow-2");
           outline: none;
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
-          stroke: #000000;
-          stroke-opacity: 0;
-          stroke-width: 0;
         }
 
-        .point.interactive:hover {
-          filter: url("#shadow-4");
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #ff0000;
-        }
-
-        .point.interactive:active {
-          filter: url("#shadow-8");
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #00ff00;
+        .curve {
+          fill: none;
+          stroke: var(---color-element-emphasis);
+          stroke-width: 2;
         }
 
-        :host(.keyboard) .point.interactive:focus {
-          filter: url("#shadow-8");
+        .curve.interactive {
+          cursor: nwse-resize;
 
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #0000ff;
+          outline: none;
         }
 
         /* Make larger targets for touch users */
@@ -13238,6 +13258,18 @@
       //  ENTER
       const svgEnter = svgUpdate.enter().append('svg').classed('main', true);
       svgEnter.html(DiscountableElement.svgDefs);
+      // Gradients for fill animations
+      const svgDefs = svgEnter.append('defs');
+      const soonerGradient = svgDefs.append('linearGradient').classed('gradient sooner', true).attr('id', 'sooner-gradient');
+      soonerGradient.append('stop').classed('stop-0', true).attr('offset', '0');
+      soonerGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
+      soonerGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
+      soonerGradient.append('stop').classed('stop-100', true).attr('offset', '1');
+      const laterGradient = svgDefs.append('linearGradient').classed('gradient later', true).attr('id', 'later-gradient');
+      laterGradient.append('stop').classed('stop-0', true).attr('offset', '0');
+      laterGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
+      laterGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
+      laterGradient.append('stop').classed('stop-100', true).attr('offset', '1');
       //  MERGE
       const svgMerge = svgEnter.merge(svgUpdate).attr('viewBox', `0 0 ${elementWidth} ${elementHeight}`);
 
@@ -13314,42 +13346,39 @@
         return datum.name;
       });
       //  ENTER
-      const optionEnter = optionUpdate.enter().append('g').classed('option', true);
-      // Curve
-      const curveEnter = optionEnter.append('g').classed('curve', true).attr('clip-path', 'url(#clip-htd-curves)');
-      curveEnter.append('path').classed('path', true).attr('d', datum => {
-        const curve = range$1(xScale(datum.d), xScale(0), -1).map(range => {
-          return {
-            d: xScale.invert(range),
-            v: HTDMath.adk2v(datum.a, datum.d - xScale.invert(range), this.k)
-          };
-        });
-        return line(curve);
-      }).attr('stroke-dasharray', (datum, index, nodes) => {
+      const optionEnter = optionUpdate.enter().append('g').attr('class', datum => {
+        const labelClass = datum.label === 's' ? 'sooner' : datum.label === 'l' ? 'later' : '';
+        const trialClass = datum.trial ? 'trial' : '';
+        return `option ${labelClass} ${trialClass}`;
+      });
+      // Body (Fill, Bar, Point)
+      const bodyEnter = optionEnter.append('g').classed('body', true);
+      // Fill
+      const fillEnter = bodyEnter.append('g').classed('fill', true).attr('clip-path', 'url(#clip-htd-curves)').each(datum => {
         if (datum.trial) {
-          const length = nodes[index].getTotalLength();
-          return `0,${length}`;
+          svgMerge.selectAll('.gradient .animation').attr('offset', 1);
         }
-        return 'none';
       });
-      curveEnter.append('path').classed('path touch', true).attr('d', datum => {
+      fillEnter.append('path').classed('region', true).attr('d', datum => {
         const curve = range$1(xScale(datum.d), xScale(0), -1).map(range => {
           return {
             d: xScale.invert(range),
             v: HTDMath.adk2v(datum.a, datum.d - xScale.invert(range), this.k)
           };
         });
-        return line(curve);
-      }).attr('stroke-dasharray', (datum, index, nodes) => {
-        if (datum.trial) {
-          const length = nodes[index].getTotalLength();
-          return `0,${length}`;
-        }
-        return 'none';
+        return line([...curve, {
+          d: 0,
+          v: 0
+        }, {
+          d: datum.d,
+          v: 0
+        }]);
       });
       // Bar
-      const barEnter = optionEnter.append('g').classed('bar', true);
-      barEnter.append('line').classed('line', true).attr('x1', datum => {
+      const barEnter = bodyEnter.append('g').classed('bar', true);
+      barEnter.append('line').classed('line', true);
+      barEnter.append('line').classed('line touch', true);
+      barEnter.selectAll('.line').attr('x1', datum => {
         return xScale(datum.d);
       }).attr('x2', datum => {
         return xScale(datum.d);
@@ -13362,12 +13391,21 @@
         }
         return 'none';
       });
-      barEnter.append('line').classed('line touch', true).attr('x1', datum => {
-        return xScale(datum.d);
-      }).attr('x2', datum => {
-        return xScale(datum.d);
-      }).attr('y1', yScale(0)).attr('y2', datum => {
-        return yScale(datum.a);
+      // Point
+      const pointEnter = bodyEnter.append('g').classed('point', true);
+      pointEnter.append('circle').classed('mark touch', true);
+      // Curve
+      const curveEnter = optionEnter.append('g').classed('curve', true).attr('clip-path', 'url(#clip-htd-curves)');
+      curveEnter.append('path').classed('path', true);
+      curveEnter.append('path').classed('path touch', true);
+      curveEnter.selectAll('.path').attr('d', datum => {
+        const curve = range$1(xScale(datum.d), xScale(0), -1).map(range => {
+          return {
+            d: xScale.invert(range),
+            v: HTDMath.adk2v(datum.a, datum.d - xScale.invert(range), this.k)
+          };
+        });
+        return line(curve);
       }).attr('stroke-dasharray', (datum, index, nodes) => {
         if (datum.trial) {
           const length = nodes[index].getTotalLength();
@@ -13375,8 +13413,11 @@
         }
         return 'none';
       });
-      // Point
-      const pointEnter = optionEnter.append('g').classed('point', true).attr('transform', datum => {
+      // Point (again)
+      const topPointEnter = optionEnter.append('g').classed('point top-point', true);
+      topPointEnter.append('circle').classed('mark touch', true);
+      topPointEnter.append('text').classed('label', true);
+      optionEnter.selectAll('.point').attr('transform', datum => {
         return `translate(${xScale(datum.d)}, ${yScale(datum.a)})`;
       }).attr('opacity', datum => {
         if (datum.trial) {
@@ -13384,33 +13425,37 @@
         }
         return 1;
       });
-      pointEnter.append('circle').classed('mark touch', true);
-      pointEnter.append('text').classed('label', true);
+
       //  MERGE
       const optionMerge = optionEnter.merge(optionUpdate);
 
       // Interactive options
-      // Curve
-      optionMerge.filter((datum, index, nodes) => {
-        return this.interactive && !select(nodes[index]).select('.curve').classed('interactive');
-      }).select('.curve').classed('interactive', true).attr('tabindex', 0)
+      // Body (Fill, Bar, Point)
+      const bodyMergeInteractive = optionMerge.filter((datum, index, nodes) => {
+        return this.interactive && !datum.trial && !select(nodes[index]).select('.body').classed('interactive');
+      }).select('.body');
+      bodyMergeInteractive.classed('interactive', true);
+      // Fill
+      bodyMergeInteractive.select('.fill').attr('tabindex', 0)
       // Drag interaction
-      .call(drag().subject(event => {
+      .call(drag().subject((event, datum) => {
         return {
-          x: event.x,
-          y: event.y
+          x: xScale(datum.d),
+          y: yScale(datum.a)
         };
       }).on('start', event => {
         const element = event.currentTarget;
         select(element).classed('dragging', true);
       }).on('drag', (event, datum) => {
         this.drag = true;
-        const dragD = datum.d - xScale.invert(event.x);
-        const d = dragD < 0 ? 0 : dragD > datum.d ? datum.d : dragD;
-        const dragV = yScale.invert(event.y);
-        const v = dragV <= 0 ? 0.001 : dragV > datum.a ? datum.a : dragV;
-        const k = HTDMath.adv2k(datum.a, d, v);
-        this.k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
+        const d = xScale.invert(event.x);
+        const a = yScale.invert(event.y);
+        datum.d = d < this.scale.time.min ? this.scale.time.min : d > this.scale.time.max ? this.scale.time.max : this.scale.time.round(d);
+        datum.a = a < this.scale.value.min ? this.scale.value.min : a > this.scale.value.max ? this.scale.value.max : this.scale.value.round(a);
+        if (datum.name === 'default') {
+          this.d = datum.d;
+          this.a = datum.a;
+        }
         this.alignState();
         this.requestUpdate();
         this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -13429,24 +13474,33 @@
       }))
       // Keyboard interaction
       .on('keydown', (event, datum) => {
-        if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-          let {
-            k
-          } = this;
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+          let keyA = datum.a;
+          let keyD = datum.d;
           switch (event.key) {
             case 'ArrowUp':
-            case 'ArrowLeft':
-              k *= event.shiftKey ? 0.95 : 0.85;
+              keyA += event.shiftKey ? 1 : 5;
               break;
             case 'ArrowDown':
+              keyA -= event.shiftKey ? 1 : 5;
+              break;
             case 'ArrowRight':
-              k *= event.shiftKey ? 1 / 0.95 : 1 / 0.85;
+              keyD += event.shiftKey ? 1 : 5;
+              break;
+            case 'ArrowLeft':
+              keyD -= event.shiftKey ? 1 : 5;
               break;
             // no-op
           }
-          k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
-          if (k !== this.k) {
-            this.k = k;
+          keyD = keyD < this.scale.time.min ? this.scale.time.min : keyD > this.scale.time.max ? this.scale.time.max : keyD;
+          keyA = keyA < this.scale.value.min ? this.scale.value.min : keyA > this.scale.value.max ? this.scale.value.max : keyA;
+          if (keyD !== datum.d || keyA !== datum.a) {
+            datum.d = keyD;
+            datum.a = keyA;
+            if (datum.name === 'default') {
+              this.d = datum.d;
+              this.a = datum.a;
+            }
             this.alignState();
             this.requestUpdate();
             this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -13464,9 +13518,7 @@
         }
       });
       // Bar
-      optionMerge.filter((datum, index, nodes) => {
-        return this.interactive && !datum.trial && !select(nodes[index]).select('.bar').classed('interactive');
-      }).select('.bar').classed('interactive', true).attr('tabindex', 0)
+      bodyMergeInteractive.select('.bar')
       // Drag interaction
       .call(drag().subject((event, datum) => {
         return {
@@ -13536,8 +13588,8 @@
       });
       // Point
       optionMerge.filter((datum, index, nodes) => {
-        return this.interactive && !datum.trial && !select(nodes[index]).select('.point').classed('interactive');
-      }).select('.point').classed('interactive', true).attr('tabindex', 0)
+        return this.interactive && !datum.trial && !select(nodes[index]).select('.top-point').classed('interact');
+      }).select('.top-point').classed('interact', true)
       // Drag interaction
       .call(drag().subject((event, datum) => {
         return {
@@ -13605,26 +13657,125 @@
           event.preventDefault();
         }
       });
+      // Curve
+      optionMerge.filter((datum, index, nodes) => {
+        return this.interactive && !select(nodes[index]).select('.curve').classed('interactive');
+      }).select('.curve').classed('interactive', true).attr('tabindex', 0)
+      // Drag interaction
+      .call(drag().subject(event => {
+        return {
+          x: event.x,
+          y: event.y
+        };
+      }).on('start', event => {
+        const element = event.currentTarget;
+        select(element).classed('dragging', true);
+      }).on('drag', (event, datum) => {
+        this.drag = true;
+        const dragD = datum.d - xScale.invert(event.x);
+        const d = dragD < 0 ? 0 : dragD > datum.d ? datum.d : dragD;
+        const dragV = yScale.invert(event.y);
+        const v = dragV <= 0 ? 0.001 : dragV > datum.a ? datum.a : dragV;
+        const k = HTDMath.adv2k(datum.a, d, v);
+        this.k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
+        this.alignState();
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('htd-curves-change', {
+          detail: {
+            name: datum.name,
+            a: datum.a,
+            d: datum.d,
+            k: this.k,
+            label: datum.label
+          },
+          bubbles: true
+        }));
+      }).on('end', event => {
+        const element = event.currentTarget;
+        select(element).classed('dragging', false);
+      }))
+      // Keyboard interaction
+      .on('keydown', (event, datum) => {
+        if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+          let {
+            k
+          } = this;
+          switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+              k *= event.shiftKey ? 0.95 : 0.85;
+              break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+              k *= event.shiftKey ? 1 / 0.95 : 1 / 0.85;
+              break;
+            // no-op
+          }
+          k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
+          if (k !== this.k) {
+            this.k = k;
+            this.alignState();
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('htd-curves-change', {
+              detail: {
+                name: datum.name,
+                a: datum.a,
+                d: datum.d,
+                k: this.k,
+                label: datum.label
+              },
+              bubbles: true
+            }));
+          }
+          event.preventDefault();
+        }
+      });
 
       // Non-interactive options
+      // Body (Fill, Bar, Point)
+      const bodyMergeNoninteractive = optionMerge.filter((datum, index, nodes) => {
+        return (!this.interactive || datum.trial) && select(nodes[index]).select('.body').classed('interactive');
+      });
+      bodyMergeNoninteractive.classed('interactive', false);
+      // Fill
+      bodyMergeNoninteractive.select('.fill').attr('tabindex', null).on('drag', null).on('keydown', null);
+      // Bar
+      bodyMergeNoninteractive.select('.bar').on('drag', null).on('keydown', null);
+      // Point
+      optionMerge.filter((datum, index, nodes) => {
+        return (!this.interactive || datum.trial) && select(nodes[index]).select('.top-point').classed('interact');
+      }).select('.top-point').classed('interact', false).on('drag', null).on('keydown', null);
       // Curve
       optionMerge.filter((datum, index, nodes) => {
         return !this.interactive && select(nodes[index]).select('.curve').classed('interactive');
       }).select('.curve').classed('interactive', false).attr('tabindex', null).on('drag', null).on('keydown', null);
-      // Bar
-      optionMerge.filter((datum, index, nodes) => {
-        return (!this.interactive || datum.trial) && select(nodes[index]).select('.bar').classed('interactive');
-      }).select('.bar').classed('interactive', false).attr('tabindex', null).on('drag', null).on('keydown', null);
-      // Point
-      optionMerge.filter((datum, index, nodes) => {
-        return (!this.interactive || datum.trial) && select(nodes[index]).select('.point').classed('interactive');
-      }).select('.point').classed('interactive', false).attr('tabindex', null).on('drag', null).on('keydown', null);
 
       // Trial Animation
+      // Fill
+      optionMerge.filter(datum => {
+        return datum.new;
+      }).each(() => {
+        svgMerge.selectAll('.gradient .animation').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('offset', () => {
+          return interpolate$1(1, 0);
+        });
+      });
+      // Bar
+      optionMerge.filter(datum => {
+        return datum.new;
+      }).selectAll('.bar .line').transition().duration(transitionDuration).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
+        const length = nodes[index].getTotalLength();
+        return interpolate$1(`0,${length}`, `${length},${length}`);
+      });
+      // Point
+      optionMerge.filter(datum => {
+        return datum.new;
+      }).selectAll('.point').transition().duration(transitionDuration / 10).delay(transitionDuration).ease(linear$1).attrTween('opacity', () => {
+        return interpolate$1(0, 1);
+      });
       // Curve
       optionMerge.filter(datum => {
         return datum.new;
-      }).select('.curve .path').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
+      }).selectAll('.curve .path').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
         const length = nodes[index].getTotalLength();
         return interpolate$1(`0,${length}`, `${length},${0}`);
       }).on('end', datum => {
@@ -13641,50 +13792,16 @@
           bubbles: true
         }));
       });
-      optionMerge.filter(datum => {
-        return datum.new;
-      }).select('.curve .path.touch').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
-        const length = nodes[index].getTotalLength();
-        return interpolate$1(`0,${length}`, `${length},${0}`);
-      });
-      // Bar
-      optionMerge.filter(datum => {
-        return datum.new;
-      }).select('.bar .line').transition().duration(transitionDuration).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
-        const length = nodes[index].getTotalLength();
-        return interpolate$1(`0,${length}`, `${length},${length}`);
-      });
-      optionMerge.filter(datum => {
-        return datum.new;
-      }).select('.bar .line.touch').transition().duration(transitionDuration).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
-        const length = nodes[index].getTotalLength();
-        return interpolate$1(`0,${length}`, `${length},${length}`);
-      });
-      // Point
-      optionMerge.filter(datum => {
-        return datum.new;
-      }).select('.point').transition().duration(transitionDuration / 10).delay(transitionDuration).ease(linear$1).attrTween('opacity', () => {
-        return interpolate$1(0, 1);
-      });
 
       // All options
-      optionUpdate.select('.curve .path').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
-        const element = elements[index];
-        const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
-        const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
-        return time => {
-          element.a = interpolateA(time);
-          element.d = interpolateD(time);
-          const curve = range$1(xScale(element.d), xScale(0), -1).map(range => {
-            return {
-              d: xScale.invert(range),
-              v: HTDMath.adk2v(element.a, element.d - xScale.invert(range), this.k)
-            };
-          });
-          return line(curve);
-        };
-      });
-      optionUpdate.select('.curve .path.touch').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
+      optionMerge.filter(datum => {
+        return datum.label === 's';
+      }).raise();
+      optionMerge.filter(datum => {
+        return datum.label === 'l';
+      }).lower();
+      // Fill
+      optionUpdate.select('.fill .region').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
         const element = elements[index];
         const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
         const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
@@ -13697,10 +13814,17 @@
               v: HTDMath.adk2v(element.a, element.d - xScale.invert(range), this.k)
             };
           });
-          return line(curve);
+          return line([...curve, {
+            d: 0,
+            v: 0
+          }, {
+            d: element.d,
+            v: 0
+          }]);
         };
       });
-      optionUpdate.select('.bar .line').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('x1', (datum, index, elements) => {
+      // Bar
+      optionUpdate.selectAll('.bar .line').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('x1', (datum, index, elements) => {
         const element = elements[index];
         const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
         return time => {
@@ -13722,41 +13846,37 @@
           return `${yScale(element.a)}`;
         };
       });
-      optionUpdate.select('.bar .line.touch').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('x1', (datum, index, elements) => {
-        const element = elements[index];
-        const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
-        return time => {
-          element.d = interpolateD(time);
-          return `${xScale(element.d)}`;
-        };
-      }).attrTween('x2', (datum, index, elements) => {
+      // Point
+      optionUpdate.selectAll('.point').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('transform', (datum, index, elements) => {
         const element = elements[index];
         const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
-        return time => {
-          element.d = interpolateD(time);
-          return `${xScale(element.d)}`;
-        };
-      }).attrTween('y2', (datum, index, elements) => {
-        const element = elements[index];
         const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
         return time => {
+          element.d = interpolateD(time);
           element.a = interpolateA(time);
-          return `${yScale(element.a)}`;
+          return `translate(${xScale(element.d)}, ${yScale(element.a)})`;
         };
       });
-      optionUpdate.select('.point').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('transform', (datum, index, elements) => {
+      optionMerge.select('.point .label').text(datum => {
+        return datum.label;
+      });
+      // Curve
+      optionUpdate.selectAll('.curve .path').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
         const element = elements[index];
-        const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
         const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
+        const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
         return time => {
-          element.d = interpolateD(time);
           element.a = interpolateA(time);
-          return `translate(${xScale(element.d)}, ${yScale(element.a)})`;
+          element.d = interpolateD(time);
+          const curve = range$1(xScale(element.d), xScale(0), -1).map(range => {
+            return {
+              d: xScale.invert(range),
+              v: HTDMath.adk2v(element.a, element.d - xScale.invert(range), this.k)
+            };
+          });
+          return line(curve);
         };
       });
-      optionMerge.select('.point .label').text(datum => {
-        return datum.label;
-      });
       //  EXIT
       // NOTE: Could add a transition here
       optionUpdate.exit().remove();