This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

See the Data Visualization column for a series of articles

Reference:

  • Learn D3: Scales
  • Scales (d3-scale)
  • D3-scale (Unofficial Chinese translation)
  • Axes (d3-axis)
  • D3-axis (Unofficial Chinese Translation)
  • Interpolators (d3-interpolate)
  • D3-interpolate (Unofficial Chinese translation)
  • Color Schemes (d3-scale-chromatic)
  • D3-scale-d4 – D4 (Unofficial Chinese Version)
  • Introducing d3-scale
  • Scales (Chinese translation) ⚠️ This article is based on d3.js v3.x
  • Introducing d3-scale
  • d3: scales, and color.

This paper mainly introduces the Scales module.

💡 In the D3 documentation, the range of input data is called domain, and the range of output data after transformation is called range

coordinate

The scale module only provides regular methods for data conversion, and cannot generate visual elements. It is generally used with the d3-Axis module, which can generate corresponding coordinate axes on the page based on the scale scale.

💡 When building the axes, it is recommended to set a margin around the container for annotating information such as the axes, and a “safe zone” in the middle for the main visual diagram content.

There are four ways to build different inverted axes (where the parameter scale is the scale used to generate the axes)

  • d3.axisTop(scale)Produces an upward-facing coordinate axis with the scale above the horizontal axis
  • d3.axisBottom(sacle)Produces a downward-facing coordinate axis with the scale below the horizontal axis
  • d3.axisRight(scale)Produces a right-facing coordinate axis with the scale to the right of the vertical axis
  • d3.axisLeft(scale)Produces a left-facing coordinate axis with the scale to the left of the vertical axis

💡 Although the axes generated are in different directions, the ** “starting point” is the same **, that is, the beginning end of the axes is the origin of the container in which they are located. The transform attribute needs to be set for the axes (or the container in which they are located) to move the coordinate axis Translate to the appropriate position.

The axis constructed by D3 is composed of a series of SVG elements:

  • Axis by<path>The path element is formed with the class namedomain
  • The scale is and the scale value is separated by the element<line> 和 <text>Composition. Each scale and corresponding scale value is wrapped in one<g>Element, which carries the class nametick
<! Render axis template on the page -->
<! -- A g element is used to wrap all elements of the coordinate axis, for example, transform -->
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
  <path class="domain" stroke="currentColor" d="M0.5, 6 where v0. 5 h880. 5 v6"></path>
  <g class="tick" opacity="1" transform="Translate (0.5 0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71 em">0.0</text>
  </g>
  <g class="tick" opacity="1" transform="Translate (176.5 0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71 em">0.2</text>
  </g>
  <g class="tick" opacity="1" transform="Translate (352.5 0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71 em">0.4</text>
  </g>
  <g class="tick" opacity="1" transform="Translate (528.5 0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71 em">0.6</text>
  </g>
  <g class="tick" opacity="1" transform="Translate (704.5 0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71 em">0.8</text>
  </g>
  <g class="tick" opacity="1" transform="Translate (880.5 0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71 em">1.0</text>
  </g>
</g>
Copy the code

The axis object, built using one of the above four methods, is also a method that takes an SVG element, Axis (Context), to render the axes inside it.

💡 However, in some of the official sample code, the axis methods are called using selection.call(axis), where selection refers to a selection set, usually a

element; Axis is an axis object.

d3.select("g")
  .call(axis);
Copy the code

One core method involved here is the ** select set method selection.call(function, otherArguments…). **, similar to the JS native method call, takes multiple input arguments, the first of which is to execute the target function, and the following arguments are to be passed to the target function. The source code is as follows:

export default function() {
  var callback = arguments[0];
  arguments[0] = this;
  callback.apply(null.arguments);
  return this;
}
Copy the code

More specifically, inside the call() method, you replace the first element of Arguments with the current selection set, as opposed to consolidating the selection set and otherArguments into a series of arguments that you pass to the target function. This method executes the given function, but returns the current selection set, making it easier to make subsequent chain calls.

function name(selection, first, last) {
  selection
      .attr("first-name", first)
      .attr("last-name", last);
}

d3.selectAll("div").call(name, "John"."Snow");

// Equivalent to the following operation
name(d3.selectAll("div"), "John"."Snow");
Copy the code

Axis objects (axis below) have some other common methods:

  • Axis.scale ([scale]) generates a new axis based on the new scale if the argument is passed; If no argument is passed, the current coordinate axis is returned

  • Axis. Ticks (the arguments…). Or axis.tickarguments ([arguments]) set the scale intervals and the format of the scale values for the axes. Different types of scales can pass different parameters. Generally set the number of the scale count (or for time scale interval) and the format specifier of the scale value

    💡 This method does not work for scales that do not provide scale.ticks, such as banded and dotted scales

    // On the time axis, set a scale every 15 minutes
axis.ticks(d3.timeMinute.every(15));
axis.tickArguments([d3.timeMinute.every(15)]);
Copy the code

  • Axis. TickValues ([values]) Overwrites the scale automatically generated scale values with the elements of the array if an array is passed; If values=null, the previously set scale value is cleared and the scale value automatically generated is used. If no argument is passed, the current scale value is returned (default is null, scale automatically generated scale value is used)

    var xAxis = d3.axisBottom(scale)
    .tickValues([1.2.3.5.8.13.21]);
Copy the code

  • Axis. TickFormat ([format]) Specifies the format of the calibration value (time format)

  • Axis. TickSize ([size]) sets the length of the inside and outside scales, default is 6

    The inner scale is different from the outer scale, which is a separate line element, while the outer scale is the scale line at the outermost ends of the coordinate axis, which is part of the axis path element.

  • Axis. TickSizeInner ([size]) and Axis. TickSizeOuter ([size]) set the length of the inner and outer scales, respectively

  • Axis. TickPadding ([padding]) Sets the spacing between the graduated line and the graduated text. The default is 3 pixels

  • Axis. Offset ([offset]) Sets the offset of the coordinate axes. The default value is 0

General process for constructing coordinate axes from scale:

  • Build appropriate scales based on properties of abstract data and graphical symbols
  • Construct a specific inverse coordinate axis based on scale
  • Add the axes to the page