Circle

Creates SVG circles based on an array of data.

Basic example

Three circles positioned by x/y, each sized by its data-bound r and filled from a per-datum fill.

Edit codeGet the code

Reset

const config = {
  data: [
    {id: "a", x: 80, y: 150, r: 55, fill: "#5d6d7e"},
    {id: "b", x: 210, y: 150, r: 75, fill: "#cc4b4b"},
    {id: "c", x: 335, y: 150, r: 45, fill: "#3a7ca5"},
  ],
  x: "x",
  y: "y",
  r: "r",
  fill: "fill",
};

Text wrapping

A label on a Circle now wraps to the circle’s interior: each line is only as wide as the circle is at that height, so text fills the round shape — widest through the middle, shorter at the top and bottom — and auto-sizes to fit. Previously labels were confined to a square inscribed in the circle, wasting the rounded sides. Just set a label accessor; d3plus handles the rest.

Edit codeGet the code

Reset

const config = {
  data: [
    {
      id: "big",
      x: 170,
      y: 170,
      r: 150,
      fill: "#3a7ca5",
      text: "Data visualization made easy — labels wrap to fill the whole circle, with shorter lines near the top and bottom.",
    },
    {
      id: "small",
      x: 430,
      y: 170,
      r: 100,
      fill: "#cc4b4b",
      text: "Text follows the curve instead of a boxy square inside the circle.",
    },
  ],
  x: "x",
  y: "y",
  r: "r",
  fill: d => d.fill,
  label: d => d.text,
};

Configuration

import {Circle} from "@d3plus/core";

Extends Shape → BaseClass.

Filter 17 config keys

activefunction | null

The active callback function for highlighting shapes.

activeStylerecord

The style to apply to active shapes.

classNamestring | array.<string> | undefined

CSS classes added to the outermost element this chart or component draws into, next to its fixed d3plus classes, so page CSS can target it: a chart's root <svg class="d3plus-viz"> (its <canvas> with the Canvas renderer) and a standalone component's <svg>. Takes a space-separated string or an array. A new value replaces the classes the previous one added; unset adds none. Tooltips take their own tooltipConfig.className.

colorDefaultscolordefaultsconfig

Overrides the default colors used when assigning fills from data and choosing legible text colors: dark and light (the text colors picked for contrast against a background), missing (null/undefined values), on/off (true/false values), sequential (the anchor hue for magnitude ramps), and scale (the categorical palette, given as a d3 ordinal scale or an array of colors). Keys are merged into the current defaults, and a Viz passes its overrides down to the shapes and components it draws.

configpartial

Narrowed .config() for Circle. Inherited surface from BaseClass.config(); the override exists only to surface per-shape keys (e.g. width/height for Rect) in autocomplete + type checks.

dataarray.<datapoint>

The data array used to create shapes. A shape will be drawn for each object in the array.

hoverfunction | null

The hover callback function for highlighting shapes on mouseover.

hoverStylerecord

The style to apply to hovered shapes.

labelConfigrecord

A pass-through to the config method of the TextBox class used to create a shape's labels.

localestring | object

The locale used for all text and number formatting. Supports the locales defined in d3plus-format. The locale can be a complex Object, a locale code (like "en-US"), or a 2-digit language code (like "en"). If a 2-digit code is provided, the "findLocale" function is used to identify the most approximate locale.

onstring

Event listener for the specified event typenames. Mirrors the core d3-selection behavior.

parentunknown

Parent config used by the wrapper.

selectstring | htmlelement | svgelement | null

The SVG container element as a d3 selector or DOM element.

shapeConfigd3plusconfig

Configuration object with key/value pairs applied as method calls on each shape.

sortfunction | null

A comparator function used to sort shapes for layering order.

textureDefaultrecord

A series of global texture methods to be used for all textures (ie. {stroke: "darkorange", strokeWidth: 2}).

translatefunction

Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.