Update d3-selection to 1.4 (add join)

Fix linting errors in d3-contour

types/d3-contour/d3-contour-tests.ts

@@ -25,10 +25,10 @@ import { randomNormal } from 'd3-random';
 const n = 256;
 const m = 256;
 const values: number[] = new Array(n * m);
-for (let j = 0.5, k = 0; j < m; ++j) {
-    for (let i = 0.5; i < n; i++) {
+for (let j = 0.5, k = 0; j < m; j += 1) {
+    for (let i = 0.5; i < n; i += 1) {
         values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3);
-        k++;
+        k += 1;
     }
 }
 
@@ -193,7 +193,7 @@ num = contDensCustom.bandwidth();
 const indNorm: CustomDatum[] = [];
 const rX = randomNormal();
 const rY = randomNormal(1, 2);
-for (let i = 0; i < 1000; i++) {
+for (let i = 0; i < 1000; i += 1) {
     indNorm.push({
         x: rX(),
         y: rY()

types/d3-selection/d3-selection-tests.ts

@@ -604,7 +604,7 @@ d3Selection.select('#svg-1') // irrelevant typing to get contextual typing in la
     .classed('has-transform-property', function(d) {
         console.log('Color of first data element array', d.length > 0 ? d[0].color : 'Data array empty'); // CircleDatumAlternative type
         // $ExpectError
-        return this.transform !== undefined;
+        return this!.transform !== undefined;
     });
 
 // SCENARIO 3: Only inferred typing (To have datum-type in 'classed' method call, no need for DOM object access)
@@ -649,6 +649,7 @@ const startCircleData: CircleDatumAlternative[] = [
         color: 'slateblue'
     }
 ];
+
 const endCircleData: CircleDatumAlternative[] = [
     {
         nodeId: 'n1',
@@ -1169,3 +1170,134 @@ predefinedNamespaces['dummy'] = 'http://www.w3.org/2020/dummynamespace';
 xWindow = d3Selection.window(xElement);
 xWindow = d3Selection.window(xDoc);
 xWindow = d3Selection.window(xWindow);
+
+// ---------------------------------------------------------------------------------------
+// JOIN - Convenient alternative to explicit enter update and exit methods
+// ---------------------------------------------------------------------------------------
+
+interface OldDatum {
+    oldData: number;
+}
+
+interface Datum {
+    data: string;
+}
+
+let selText: d3Selection.Selection<SVGTextElement, Datum, SVGSVGElement, SVGDatum>;
+let selTextAndCircle: d3Selection.Selection<SVGTextElement | SVGCircleElement, Datum, SVGSVGElement, SVGDatum>;
+
+const text = svgEl.selectAll<SVGTextElement, OldDatum>('text').data<Datum>([{data: 'a'}]);
+
+declare const r: () => boolean;
+
+// with only enter param
+
+selText = text.join('text');
+selText = text.join<SVGTextElement>('custom');
+selText = text.join(enter => enter.append('text').text(d => d.data));
+
+selText = text.join('circle'); // $ExpectError
+selText = text.join<SVGCircleElement>('custom'); // $ExpectError
+selText = text.join(enter => enter.append('circle')); // $ExpectError
+
+selTextAndCircle = text.join('circle');
+selTextAndCircle = text.join<SVGCircleElement>('custom');
+selTextAndCircle = text.join(enter => enter.append('circle').text(d => d.data));
+
+// with all param
+
+selText = text.join(
+    'text',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.data).remove(),
+);
+
+selText = text.join<SVGTextElement>(
+    'custom',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.data).remove(),
+);
+
+selText = text.join(
+    enter => enter.append('text').text(d => d.data),
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.data).remove(),
+);
+
+selTextAndCircle = text.join(
+    'circle',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.data).remove(),
+);
+
+selTextAndCircle = text.join<SVGCircleElement>(
+    'custom',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.data).remove(),
+);
+
+selTextAndCircle = text.join(
+    enter => enter.append('circle').text(d => d.data),
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.data).remove(),
+);
+
+// with all param and old datum
+
+selText = text.join<'text', OldDatum>(
+    'text',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => `Bye ${d.oldData}`).remove(),
+);
+
+selText = text.join<SVGTextElement, OldDatum>(
+    'custom',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => `Bye ${d.oldData}`).remove(),
+);
+
+selText = text.join<SVGTextElement, OldDatum>(
+    enter => enter.append('text').text(d => d.data),
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.oldData).remove(),
+);
+
+selTextAndCircle = text.join<'circle', OldDatum>(
+    'circle',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.oldData).remove(),
+);
+
+selTextAndCircle = text.join<SVGCircleElement, OldDatum>(
+    'circle',
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.oldData).remove(),
+);
+
+selTextAndCircle = text.join<SVGCircleElement, OldDatum>(
+    enter => enter.append('circle').text(d => d.data),
+    update => r ? undefined : update.text(d => d.data).attr('fill', 'gray'),
+    exit => exit.text(d => d.oldData).remove(),
+);
+
+// Example from: https://github.com/d3/d3-selection/issues/194#issuecomment-427577484
+const groups = svgEl.selectAll<SVGGElement, {}>('g')
+    .data([{r: 10, text: 'hi'}])
+    .join(
+        (enter) => {
+            const g = enter.append('g').attr('class', 'tick');
+            g.append('circle');
+            g.append('text');
+            return g;
+        },
+        () => undefined,
+        (exit) => exit.remove()
+    )
+    .attr('transform', (_, i) => `translate(0, ${i})`);
+
+    groups.select('circle')
+        .attr('r', d => d.r);
+
+    groups.select('text')
+        .text(d => d.text)
+        .attr('dy', '0.32em');

types/d3-selection/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for D3JS d3-selection module 1.3
+// Type definitions for D3JS d3-selection module 1.4
 // Project: https://github.com/d3/d3-selection/
 // Definitions by: Tom Wanzek <https://github.com/tomwanzek>
 //                 Alex Ford <https://github.com/gustavderdrache>
@@ -7,7 +7,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-// Last module patch version validated against: 1.3.0
+// Last module patch version validated against: 1.4.0
 
 // --------------------------------------------------------------------------
 // Shared Type Definitions and Interfaces
@@ -782,6 +782,40 @@ export interface Selection<GElement extends BaseType, Datum, PElement extends Ba
      */
     data<NewDatum>(data: ValueFn<PElement, PDatum, NewDatum[]>, key?: ValueFn<GElement | PElement, Datum | NewDatum, string>): Selection<GElement, NewDatum, PElement, PDatum>;
 
+    /**
+     * Appends, removes and reorders elements as necessary to match the data that was previously bound by `selection.data`, returning the merged enter and update selection.
+     * This method is a convenient alternative to the more explicit `selection.enter`, `selection.exit`, `selection.append` and `selection.remove`.
+     *
+     * The "matching" logic is determined by the key function passed to `selection.data`.
+     */
+    join<K extends keyof ElementTagNameMap, OldDatum = Datum>(
+        enter: K,
+        update?: (elem: Selection<GElement, Datum, PElement, PDatum>) => Selection<GElement, Datum, PElement, PDatum> | undefined,
+        exit?: (elem: Selection<GElement, OldDatum, PElement, PDatum>) => void
+    ): Selection<GElement | ElementTagNameMap[K], Datum, PElement, PDatum>;
+    /**
+     * Appends, removes and reorders elements as necessary to match the data that was previously bound by `selection.data`, returning the merged enter and update selection.
+     * This method is a convenient alternative to the more explicit `selection.enter`, `selection.exit`, `selection.append` and `selection.remove`.
+     *
+     * The "matching" logic is determined by the key function passed to `selection.data`.
+     */
+    join<ChildElement extends BaseType, OldDatum = Datum>(
+        enter: string,
+        update?: (elem: Selection<GElement, Datum, PElement, PDatum>) => Selection<GElement, Datum, PElement, PDatum> | undefined,
+        exit?: (elem: Selection<GElement, OldDatum, PElement, PDatum>) => void
+    ): Selection<ChildElement | GElement, Datum, PElement, PDatum>;
+    /**
+     * Appends, removes and reorders elements as necessary to match the data that was previously bound by `selection.data`, returning the merged enter and update selection.
+     * This method is a convenient alternative to the more explicit `selection.enter`, `selection.exit`, `selection.append` and `selection.remove`.
+     *
+     * The "matching" logic is determined by the key function passed to `selection.data`.
+     */
+    join<ChildElement extends BaseType, OldDatum = Datum>(
+        enter: (elem: Selection<EnterElement, Datum, PElement, PDatum>) => Selection<ChildElement, Datum, PElement, PDatum>,
+        update?: (elem: Selection<GElement, Datum, PElement, PDatum>) => Selection<GElement, Datum, PElement, PDatum> | undefined,
+        exit?: (elem: Selection<GElement, OldDatum, PElement, PDatum>) => void
+    ): Selection<ChildElement | GElement, Datum, PElement, PDatum>;
+
     /**
      * Return the enter selection: placeholder nodes for each datum that had no corresponding DOM element
      * in the selection. (The enter selection is empty for selections not returned by selection.data.)
@@ -828,9 +862,9 @@ export interface Selection<GElement extends BaseType, Datum, PElement extends Ba
      * When a specified event is dispatched on a selected node, the specified listener will be evaluated for each selected element.
      *
      * An optional capture flag may be specified which corresponds to the W3C useCapture flag:
-     * “After initiating capture, all events of the specified type will be dispatched to the registered EventListener before being
+     * "After initiating capture, all events of the specified type will be dispatched to the registered EventListener before being
      * dispatched to any EventTargets beneath them in the tree. Events which are bubbling upward through the tree will not
-     * trigger an EventListener designated to use capture.”
+     * trigger an EventListener designated to use capture."
      *
      * @param typenames The typenames is a string event type, such as click, mouseover, or submit; any DOM event type supported by your browser may be used.
      * The type may be optionally followed by a period (.) and a name; the optional name allows multiple callbacks to be registered