This is the 13th 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: Shapes
  • Shapes (d3-shape)
  • D3-shape (Unofficial Chinese Translation)

The symbol generator Symbols provides a series of commonly used Symbols that represent data points in a scatter plot to distinguish between different data classes.

There are 7 symbols built into D3:

  • d3.symbolCirclecircular
  • d3.symbolCrosscross
  • d3.symbolDiamondThe diamond
  • d3.symbolSquareA square
  • d3.symbolStarstar
  • d3.symbolTriangleAn upward triangle
  • d3.symbolWyeY

💡 can obtain an array of these 7 built-in symbol types via d3.symbols, which can be used to create Ordinal Scales.

Method of used3.symbol([type][, size])Create a symbol generator (hereinafter calledsymbol)

When creating a symbol generator, the first (optional) argument sets the symbol type, which can be one of the seven built-in symbol types or a custom symbol type; The second (optional) parameter sets the size of the symbol in pixels; If there is no input, the symbol generator is called to create a circular symbol with a width and height of 64 px by default.

It is both a method that can be called directly to generate the corresponding symbol.

It is also an object that has multiple methods for setting different parameters, and is typically used in chained calls:

  • Symbol.type ([type]) sets the symbol type, which can be one of the seven built-in symbol types or a custom symbol type. The default value is circle, and its input parameter is the following function:

    function type() {
  return circle;
}
Copy the code

  • Symbol.size ([size]) sets the symbol size(width and height are the same) in pixels, which is useful if you want to encode data using both symbol type and symbol size visual channel variables. The default values are as follows

    function size() {
  return 64;
}
Copy the code

  • Symbol.context (parentDOM) sets the parent container. When using a symbol generator, if a parent container is set, elements are generated and added to the parent container; If no parent container is set, a string is generated that can be used as an attribute value for attribute D of the element

💡 you can customize symbol types using the related interface provided by D3. It is an object with the method draw, which takes two inputs, context and size, where context is an object that can call the path-related methods of the Canvas API; Size sets the size of the symbol. You can refer to the source code for the seven D3 built-in symbols to see how to create symbol types.