This is the 22nd day of my participation in the First Challenge 2022

See the Data Visualization column for a series of articles

The following methods can sort a data set or retrieve elements for a specific condition

  • D3. rank(iterable[, comparator]) or d3.rank(iterable[, accessor]) sorts the elements of an iterable and returns an array representing the sorted values. Ascending is used by default, so each element in the array returned (an index value) represents the ordinal number of the element corresponding to that position in the sort.

    The first argument iterable is an iterable, or data set.

    The second (optional) argument can be an accessor or comparator, which are functions but do different things:

    • Accessor takes an argument D, the element of the iterable currently iterated over, and returns a value representing that element for comparison

    • The comparator comparator takes two arguments, A and b, which are the element of the iterable currently iterated over and the next element to be compared to. Set the rules for comparing these two elements in the function.

    The return value can be -1 (or negative), 0, or 1 (or positive), indicating the order of the two elements, respectively. If the return value is -1, element A is placed before element B. If the return value is 1, place element A after element B; If 0 is returned, the relative position of element A and element B remains the same.

    💡 elements of Nullish null value type are ranked last and assigned a non-numeric NaN

    💡 if you want to order descending, you can pass the built-in comparison function D3. Descending

    // The returned array [1, NaN, 2, 0] indicates where each element should be placed in ascending order:
// Element {x: 1} has an index value of 1 and should be in the second place
// Element {} has an index value of NaN, which should be last
// Element {x: 2} has an index value of 2 and should be in the third place
// Element {x: 0} has an index value of 0 and should be the first bit
d3.rank([{x: 1}, {}, {x: 2}, {x: 0}].d= > d.x); // [1, NaN, 2, 0]

// Strings can also be sorted
// Compare the characters of strings in sequence, using the numeric code of the characters (all strings are utF-16 encoding)
d3.rank(["b"."c"."b"."a"]); // [1, 3, 1, 0]

// Use descending order
d3.rank([1.2.3], d3.descending); / / (2, 1, 0]
Copy the code

  • D3. least(iterable[, comparator]) or d3.least(iterable[, accessor]) gets the minimum value of an iterable.

    This is the same as d3.min() except that you can set the comparator’s comparator to specify a custom comparison mode for elements. By default, elements are sorted in ascending order and the first element is taken.

    const array = [{foo: 42}, {foo: 91}];
// Set the comparator
// Ascending (default)
d3.least(array, (a, b) = > a.foo - b.foo); // {foo: 42}
/ / descending
d3.least(array, (a, b) = > b.foo - a.foo); // {foo: 91}

// Set accessors
d3.least(array, a= > a.foo); // {foo: 42}
Copy the code

    Returns undefined if there are no numeric elements in the iterable

    💡 If you want to get the smallest index, you can use d3.leastIndex(iterable[, comparator]) or d3.leastIndex(iterable[, accessor]). It has the same function as d3.minindex () except that it sets the comparator’s comparator. This method returns -1 if the iterable contains non-comparable elements.

  • D3. greatest(iterable[, comparator]) or d3.greatest(iterable[, accessor]) gets the maximum value of the iterable.

    💡 greatestIndex(iterable[, comparator]) or d3.greatestIndex(iterable[, accessor])

  • D3. ascending(a, b) compares the size of two parameters A and b and returns different values based on the size relationship.

    Its source code is as follows

    function ascending(a, b) {
  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}
Copy the code
    • ifaLess thanbIt returns- 1
    • ifaIs greater thanbIt returns1
    • ifaIs equal to thebIt returns0

    This method is used as the default comparator for sorting operations. Since the return value is used to determine the final order of elements A and B, if the return value is negative, element A precedes element B. If the return value is positive, element A follows element B; If the return value is 0, the relative positions of elements A and b remain the same. Therefore, in the above rules, the smaller values will be placed first and the larger values will be placed later, that is, in ascending order

  • Descending (a, b) also returns a different value based on the size relationship between parameter A and parameter B, which is opposite to method D3.descending (a, b).

  • D3. quickSelect (array, k[, left[, right[, compare]]]) select(array, k[, left[, right[, compare]]) select(array, k[, left[, right[, compare]]) Such that the left element of the returned array is the smallest k+1 element.

    The array returned by ⚠️ is not completely ordered.

    The first parameter array is an array, or data set

    The second argument k is called the interval index middle index or pointer index pivot index. Returns an array in which the elements to the left of the index are less than (or equal to) the elements to the right

    The third and fourth (optional) arguments set the fragmentation of the array (including the elements indicated by the left and right indexes) and operate only on the elements in that fragmentation

    The fifth (optional) parameter is used to set the comparator comparator

    const numbers = [16.15.18.10.17.14.13.19.11.12];
// The returned array is not completely ordered
// Just make sure the first two elements are minimal
d3.quickselect(numbers.slice(), 2);// [11, 10, 12, 15, 13, 14, 16, 17, 18, 19]

const input = [0.4.1.6.7.5.8.2.9.3];
// Query the array from element 5 (index 4) to element 9 (index 8)
// The interval index (for the entire array) is 6
// Select two smaller values for the index values within the range [4, 8]
/ / can check website https://observablehq.com/@d3/d3-quickselect#cell-405 provides the visual presentation
d3.quickselect(input.slice(), 6.4.8); // [0, 4, 1, 6, 2, 5, 7, 8, 9, 3]
Copy the code

    💡 This method performs better and executes faster than the arr.sort() method of arrays, and is generally used to fetch quantiles rather than returning an ordered array. You can see how this works here.