Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

API Reference

张天旭 edited this page · 212 revisions

WikiAPI Reference

Everything in D3 is scoped under the d3 namespace.

D3 uses semantic versioning. You can find the current version of D3 as d3.version.

See one of:

  • Behaviors - reusable interaction behaviors
  • Core - selections, transitions, data, localization, colors, etc.
  • Geography - project spherical coordinates, latitude & longitude math
  • Geometry - utilities for 2D geometry, such as Voronoi diagrams and quadtrees
  • Layouts - derive secondary data for positioning elements
  • Scales - convert between data and visual encodings
  • SVG - utilities for creating Scalable Vector Graphics
  • Time - parse or format times, compute calendar intervals, etc.

d3 (core)

Selections

Transitions

Working with Arrays

  • d3.ascending - compare two values for sorting.
  • d3.bisectLeft - search for a value in a sorted array.
  • d3.bisector - bisect using an accessor or comparator.
  • d3.bisectRight - search for a value in a sorted array.
  • d3.bisect - search for a value in a sorted array.
  • d3.descending - compare two values for sorting.
  • d3.deviation - compute the standard deviation of an array of numbers.
  • d3.entries - list the key-value entries of an associative array.
  • d3.extent - find the minimum and maximum value in an array.
  • d3.keys - list the keys of an associative array.
  • d3.map - a shim for ES6 maps, since objects are not hashes!
  • d3.max - find the maximum value in an array.
  • d3.mean - compute the arithmetic mean of an array of numbers.
  • d3.median - compute the median of an array of numbers (the 0.5-quantile).
  • d3.merge - merge multiple arrays into one array.
  • d3.min - find the minimum value in an array.
  • d3.nest - group array elements hierarchically.
  • d3.pairs - returns an array of adjacent pairs of elements.
  • d3.permute - reorder an array of elements according to an array of indexes.
  • d3.quantile - compute a quantile for a sorted array of numbers.
  • d3.range - generate a range of numeric values.
  • d3.set - a shim for ES6 sets, since objects are not hashes!
  • d3.shuffle - randomize the order of an array.
  • d3.sum - compute the sum of an array of numbers.
  • d3.transpose - transpose an array of arrays.
  • d3.values - list the values of an associated array.
  • d3.variance - compute the variance of an array of numbers.
  • d3.zip - transpose a variable number of arrays.
  • map.empty - returns false if the map has at least one entry.
  • map.entries - returns the map’s array of entries (key-values objects).
  • map.forEach - calls the specified function for each entry in the map.
  • map.get - returns the value for the specified key.
  • map.has - returns true if the map contains the specified key.
  • map.keys - returns the map’s array of keys.
  • map.remove - removes the entry for specified key.
  • map.set - sets the value for the specified key.
  • map.size - returns the number of entries in the map.
  • map.values - returns the map’s array of values.
  • nest.entries - evaluate the nest operator, returning an array of key-values tuples.
  • nest.key - add a level to the nest hierarchy.
  • nest.map - evaluate the nest operator, returning an associative array.
  • nest.rollup - specify a rollup function for leaf values.
  • nest.sortKeys - sort the current nest level by key.
  • nest.sortValues - sort the leaf nest level by value.
  • set.add - adds the specified value.
  • set.empty - returns true if the set has at least one value.
  • set.forEach - calls the specified function for each value in the set.
  • set.has - returns true if the set contains the specified value.
  • set.remove - removes the specified value.
  • set.size - returns the number of values in the set.
  • set.values - returns the set’s array of values.

Math

Loading External Resources

  • d3.csv - request a comma-separated values (CSV) file.
  • d3.html - request an HTML document fragment.
  • d3.json - request a JSON blob.
  • d3.text - request a text file.
  • d3.tsv - request a tab-separated values (TSV) file.
  • d3.xhr - request a resource using XMLHttpRequest.
  • d3.xml - request an XML document fragment.
  • xhr.abort - abort an outstanding request.
  • xhr.get - issue a GET request.
  • xhr.header - set a request header.
  • xhr.mimeType - set the Accept request header and override the response MIME type.
  • xhr.on - add an event listener for "progress", "load" or "error" events.
  • xhr.post - issue a POST request.
  • xhr.response - set a response mapping function.
  • xhr.send - issue a request with the specified method and data.

String Formatting

CSV Formatting (d3.csv)

  • d3.csv.formatRows - format an array of tuples into a CSV string.
  • d3.csv.format - format an array of objects into a CSV string.
  • d3.csv.parseRows - parse a CSV string into tuples, ignoring the header row.
  • d3.csv.parse - parse a CSV string into objects using the header row.
  • d3.csv - request a comma-separated values (CSV) file.
  • d3.dsv - create a parser/formatter for the specified delimiter and mime type.
  • d3.tsv.formatRows - format an array of tuples into a TSV string.
  • d3.tsv.format - format an array of objects into a TSV string.
  • d3.tsv.parseRows - parse a TSV string into tuples, ignoring the header row.
  • d3.tsv.parse - parse a TSV string into objects using the header row.
  • d3.tsv - request a tab-separated values (TSV) file.

Localization

Colors

  • d3.hcl - specify a color in HCL space.
  • d3.hsl - specify a color in HSL space.
  • d3.lab - specify a color in L*a*b* space.
  • d3.rgb - specify a color in RGB space.
  • hcl.brighter - increase lightness by some exponential factor (gamma).
  • hcl.darker - decrease lightness by some exponential factor (gamma).
  • hcl.rgb - convert from HCL to RGB.
  • hcl.toString - convert an HCL color to a string.
  • hsl.brighter - increase lightness by some exponential factor (gamma).
  • hsl.darker - decrease lightness by some exponential factor (gamma).
  • hsl.rgb - convert from HSL to RGB.
  • hsl.toString - convert an HSL color to a string.
  • lab.brighter - increase lightness by some exponential factor (gamma).
  • lab.darker - decrease lightness by some exponential factor (gamma).
  • lab.rgb - convert from L*a*b* to RGB.
  • lab.toString - convert a L*a*b* color to a string.
  • rgb.brighter - increase RGB channels by some exponential factor (gamma).
  • rgb.darker - decrease RGB channels by some exponential factor (gamma).
  • rgb.hsl - convert from RGB to HSL.
  • rgb.toString - convert an RGB color to a string.

Namespaces

Internals

  • d3.dispatch - create a custom event dispatcher.
  • d3.functor - create a function that returns a constant.
  • d3.rebind - rebind an inherited getter/setter method to a subclass.
  • dispatch.on - register or unregister an event listener.
  • dispatch.type - dispatch an event to registered listeners.

d3.scale (Scales)

Quantitative

Ordinal

d3.svg (SVG)

Shapes

Axes

Controls

  • brush.clear - reset the brush extent.
  • brush.empty - whether or not the brush extent is empty.
  • brush.event - dispatch brush events after setting the extent.
  • brush.extent - the brush’s extent in zero, one or two dimensions.
  • brush.on - listeners for when the brush is moved.
  • brush.x - the brush’s x-scale, for horizontal brushing.
  • brush.y - the brush’s y-scale, for vertical brushing.
  • brush - apply a brush to the given selection or transition.
  • d3.svg.brush - click and drag to select one- or two-dimensional regions.

d3.time (Time)

Time Formatting

Time Scales

  • d3.time.scale - construct a linear time scale.
  • scale.clamp - enable or disable clamping of the output range.
  • scale.copy - create a new scale from an existing scale.
  • scale.domain - get or set the scale's input domain.
  • scale.interpolate - get or set the scale's output interpolator.
  • scale.invert - get the domain value corresponding to a given range value.
  • scale.nice - extend the scale domain to nice round numbers.
  • scale.rangeRound - set the scale's output range, and enable rounding.
  • scale.range - get or set the scale's output range.
  • scale.tickFormat - get a formatter for displaying tick values.
  • scale.ticks - get representative values from the input domain.
  • scale - get the range value corresponding to a given domain value.

Time Intervals

d3.layout (Layouts)

Bundle

  • bundle - apply Holten's hierarchical bundling algorithm to edges.
  • d3.layout.bundle - construct a new default bundle layout.

Chord

Cluster

Force

Hierarchy

Histogram

Pack

  • d3.layout.pack - produce a hierarchical layout using recursive circle-packing.
  • pack.children - get or set the children accessor function.
  • pack.links - compute the parent-child links between tree nodes.
  • pack.nodes - compute the pack layout and return the array of nodes.
  • pack.padding - specify the layout padding in (approximate) pixels.
  • pack.radius - specify the node radius, rather than deriving it from value.
  • pack.size - specify the layout size in x and y.
  • pack.sort - control the order in which sibling nodes are traversed.
  • pack.value - get or set the value accessor used to size circles.
  • pack - alias for pack.nodes.

Partition

Pie

  • d3.layout.pie - construct a new default pie layout.
  • pie.endAngle - get or set the overall end angle of the pie.
  • pie.padAngle - get or set the pad angle of the pie.
  • pie.sort - control the clockwise order of pie slices.
  • pie.startAngle - get or set the overall start angle of the pie.
  • pie.value - get or set the value accessor function.
  • pie - compute the start and end angles for arcs in a pie or donut chart.

Stack

  • d3.layout.stack - construct a new default stack layout.
  • stack.offset - specify the overall baseline algorithm.
  • stack.order - control the order in which series are stacked.
  • stack.out - get or set the output function for storing the baseline.
  • stack.values - get or set the values accessor function per series.
  • stack.x - get or set the x-dimension accessor function.
  • stack.y - get or set the y-dimension accessor function.
  • stack - compute the baseline for each series in a stacked bar or area chart.

Tree

  • d3.layout.tree - position a tree of nodes tidily.
  • tree.children - get or set the children accessor function.
  • tree.links - compute the parent-child links between tree nodes.
  • tree.nodeSize - specify a fixed size for each node.
  • tree.nodes - compute the tree layout and return the array of nodes.
  • tree.separation - get or set the spacing function between neighboring nodes.
  • tree.size - specify the layout size in x and y.
  • tree.sort - control the order in which sibling nodes are traversed.
  • tree - alias for tree.nodes.

Treemap

d3.geo (Geography)

Paths

Projections

Streams

d3.geom (Geometry)

Voronoi

  • d3.geom.voronoi - create a Voronoi layout with default accessors.
  • voronoi.clipExtent - get or set the clip extent for the tesselation.
  • voronoi.links - compute the Delaunay mesh as a network of links.
  • voronoi.triangles - compute the Delaunay mesh as a triangular tessellation.
  • voronoi.x - get or set the x-coordinate accessor for each point.
  • voronoi.y - get or set the y-coordinate accessor for each point.
  • voronoi - compute the Voronoi tessellation for the specified points.

Quadtree

Polygon

Hull

  • d3.geom.hull - create a convex hull layout with default accessors.
  • hull - compute the convex hull for the given array of points.
  • hull.x - get or set the x-coordinate accessor.
  • hull.y - get or set the y-coordinate accessor.

d3.behavior (Behaviors)

Drag

Zoom

  • d3.behavior.zoom - create a zoom behavior.
  • zoom.center - an optional focal point for mousewheel zooming.
  • zoom.duration - get or set the dblclick transition duration.
  • zoom.event - dispatch zoom events after setting the scale or translate.
  • zoom.on - listeners for when the scale or translate changes.
  • zoom.scaleExtent - optional limits on the scale factor.
  • zoom.scale - the current scale factor.
  • zoom.size - the dimensions of the viewport.
  • zoom.translate - the current translate offset.
  • zoom.x - an optional scale whose domain is bound to the x extent of the viewport.
  • zoom.y - an optional scale whose domain is bound to the y extent of the viewport.
  • zoom - apply the zoom behavior to the selected elements.
Something went wrong with that request. Please try again.