Image

Creates SVG images based on an array of data.

Basic example

A single datum places one image at its x/y at the given width/height; the url accessor here points to an inline SVG data URI.

Edit codeGet the code

Reset

const config = {
  // The default accessors read the `x`/`y`/`width`/`height`/`url` keys
  // directly from each datum.
  data: [
    {
      id: "a",
      x: 320,
      y: 160,
      width: 140,
      height: 140,
      url: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect width='140' height='140' rx='12' fill='%233a7ca5'/%3E%3Ccircle cx='70' cy='70' r='45' fill='%23f5d76e'/%3E%3C/svg%3E",
    },
  ],
};

Multiple images

One image per datum, each sized by its own width and height and centered on its x/y; opacity fades the third. Geomap and Network use this shape for icons and flags.

Edit codeGet the code

Reset

const icon = (color, size) =>
  `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><rect width='${size}' height='${size}' rx='${size / 8}' fill='${color}'/><circle cx='${size / 2}' cy='${size / 2}' r='${size / 4}' fill='white' fill-opacity='0.85'/></svg>`,
  )}`;

const config = {
  data: [
    {id: "a", x: 120, y: 160, width: 80, height: 80, url: icon("#3a7ca5", 80)},
    {
      id: "b",
      x: 260,
      y: 160,
      width: 120,
      height: 120,
      url: icon("#cc4b4b", 120),
    },
    {id: "c", x: 420, y: 160, width: 60, height: 60, url: icon("#5d6d7e", 60)},
  ],
  opacity: d => (d.id === "c" ? 0.5 : 1),
};

Configuration

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

Filter 11 config keys

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.

configrecord

Get/set multiple config values at once. Mirrors the BaseClass.config() contract used by the other shapes (and relied on by the React wrapper): each patch key is routed through its matching fluent accessor (or data/select), with unknown keys stored on schema verbatim.

dataarray.<datapoint>

The data array used to create image shapes. An <image> tag will be drawn for each object in the array.

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.

renderfunction

Renders the current Image to the page. If a callback is specified, it will be called once the images are done drawing.

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.

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.