API Reference (русскоязычная версия)

Gleb Svechnikov edited this page Mar 11, 2016 · 25 revisions

WikiAPI Reference (русскоязычная версия)

!!Страница находится в стадии перевода!!

D3 использует семантическое версионирование. Вы можете узнать текущую версию D3 в d3.version.

D3 состоит из:

  • Core - выборки, переходы, данные, локализации, цвета и т.д
  • Scales - масштабирование данных и цветовых кодировок
  • SVG - инструменты для создания масштабируемой векторной графики
  • Time - парсинг временных форматов, вычисление календарных интервалов и т.п
  • Layouts - получение вторичных данных для позиционирования элементов
  • Geography - проектно-специфичные координаты, вычисления над широтой и долготой
  • Geometry - утилиты для 2D-геометрии
  • Behaviors - формы поведения взаимодействия

d3 (core)

Selections (Выборки)

  • d3.select - выборка элемента из текущего документа.
  • d3.selectAll - выборка набора элементов из текущего документа.
  • selection.attr - получить или установить значение аттрибута.
  • selection.classed - добавить или удалить CSS класс.
  • selection.style - получить или установить параметры стилей.
  • selection.property - получить или установить необработанные свойства.
  • selection.text - получить или установить текстовое содержание.
  • selection.html - получить или установить HTML-содержание.
  • selection.append - создать или добавить новый элемент.
  • selection.insert - создать или вставить новый элемент перед существующим.
  • selection.remove - удалить элемент из документа.
  • selection.data - получить или установить данные для группы элементов при вычислениях реляционного соединения.
  • selection.enter - получить заполнители для недостающих элементов.
  • selection.exit - получить элементы, которые больше не нужны. (прим. элементы, которые не были изменены. Читать про использование data, enter и exit.)
  • selection.datum - получить или установить данные для отдельных элементов, не вычисляя соединение.
  • selection.filter - фильтровать выбор на основе данных.
  • selection.sort - сортировать элементы в документе на основе данных.
  • selection.order - reorders elements in the document to match the selection.
  • selection.on - добавление или удаление обработчиков событий (event listeners).
  • selection.transition - Начало перехода выбранных элементов.
  • selection.interrupt - immediately interrupt the current transition, if any.
  • selection.each - вызывает указанную функцию для каждого элемента из выборки.
  • selection.call - вызвать функцию, проходящую в текущем выделении.
  • selection.empty - возвращает true, если выборка пуста.
  • selection.node - возвращает первый элемент из выборки.
  • selection.size - возвращает количество элементов в выборке.
  • selection.select - subselect a descendant element for each selected element.
  • selection.selectAll - subselect multiple descendants for each selected element.
  • d3.selection - augment the selection prototype, or test instance types.
  • d3.event - access the current user event for interaction.
  • d3.mouse - получает позицию мыши относительно заданного контейнера.
  • d3.touch - получает сенсорное положение относительно указанного контейнера.
  • d3.touches - получает сенсорные положения по относительно указанных контейнеров.

Transitions ### Анимированные переходы

  • d3.transition - начать анимированный переход.
  • transition.delay - указать задержку анимированного перехода (в миллисекундах).
  • transition.duration - указать продолжительность анимированного перехода (в миллисекундах).
  • transition.ease - определить функцию ослабления перехода.
  • transition.attr - плавно перейти на новое значение атрибута.
  • transition.attrTween - плавный переход между двумя значениями атрибутов.
  • transition.style - плавный переход к модернизированному значению свойства.
  • transition.styleTween - плавный переход между двумя значениями свойств стиля.
  • transition.text - установить текстовое содержимое при запуске перехода.
  • transition.tween - задать пользовательские анимации оператору для их запуска составе перехода.
  • transition.select - начать переход на порожденном элементе для каждого выбранного элемента.
  • transition.selectAll - начать переход на нескольких элементах для каждого выбранного элемента.
  • transition.filter - фильтр перехода, основанный на значениях data.
  • transition.transition - когда этот переход закончится, запустите другой на тех же элементах.
  • transition.remove - удалить выбранные элементы в конце перехода.
  • transition.empty - возвращает истину (true), если переход пуст.
  • transition.node - возвращает первый узел в переходе.
  • transition.size - возвращает количество элементов в выборке.
  • transition.each - добавить Listener (?слушателя?) для перехода конечных событий.
  • transition.call - вызвать функцию, передающуюся в текущем переходе.
  • d3.ease - настроить время перехода.
  • ease - параметрическая функция упрощения.
  • d3.timer - начать пользовательский таймер анимации.
  • d3.timer.flush - немедленно выполнить любые таймеры c нулевой задержкой.
  • d3.interpolate - интерполяция двух значений (поиск их промежуточных значений).
  • interpolate - параметрическая функция интерполяции.
  • d3.interpolateNumber - интерполировать два числа.
  • d3.interpolateRound - интерполировать два целых числа.
  • d3.interpolateString - интерполировать две строки.
  • d3.interpolateRgb - интерполировать два цвета RGB.
  • d3.interpolateHsl - интерполировать два цвета HSL.
  • d3.interpolateLab - интерполировать два L* A* B* цвета.
  • d3.interpolateHcl - интерполировать два цвета HCL.
  • d3.interpolateArray - интерполировать два массива значений.
  • d3.interpolateObject - интерполировать два произвольных объекта.
  • d3.interpolateTransform - интерполировать два 2D матричных преобразования.
  • d3.interpolateZoom - плавное изменение масштаба и панорамирование между двумя точками.
  • d3.interpolators - зарегистрировать пользовательский интерполятор.

Working with Arrays ### Работа с массивами

  • d3.ascending - сравнение 2 массивов по условию возрастания.
  • d3.descending - сравнение 2 массивов по условию убывания.
  • d3.min - поиск минимального значения в массиве.
  • d3.max - поиск максимального значения в массиве.
  • d3.extent - поиск минимального и максимального элементов в массиве.
  • d3.sum - суммирование всех элементов массива, состоящего из чисел.
  • d3.mean - арифметическое среднее элементов массива, состоящего из чисел.
  • d3.median - медиана (квантиль уровня 0.5) массива, состоящего из чисел.
  • d3.quantile - поиск квантили для упорядоченного массива, состоящего из чисел.
  • d3.bisect - поиск значения в упорядоченном массиве.
  • d3.bisectRight - поиск значения в упорядоченном массиве.
  • d3.bisectLeft - поиск значения в упорядоченном массиве.
  • d3.bisector - bisect using an accessor or comparator.
  • d3.shuffle - перемешать элементы массива случайным образом.
  • d3.permute - переупорядочить массив элементов, в соответствии с массивом индексов.
  • d3.zip - транспонировать переменное количество массивов.
  • d3.transpose - транспонировать массив массивов.
  • d3.pairs - returns an array of adjacent pairs of elements.
  • d3.keys - список ключей ассоциативного массива.
  • d3.values - список значений ассоциативного массива.
  • d3.entries - list the key-value entries of an associative array.
  • d3.merge - merge multiple arrays into one array.
  • d3.range - generate a range of numeric values.
  • d3.nest - group array elements hierarchically.
  • nest.key - add a level to the nest hierarchy.
  • nest.sortKeys - sort the current nest level by key.
  • nest.sortValues - sort the leaf nest level by value.
  • nest.rollup - specify a rollup function for leaf values.
  • nest.map - evaluate the nest operator, returning an associative array.
  • nest.entries - evaluate the nest operator, returning an array of key-values tuples.
  • d3.map - a shim for ES6 maps, since objects are not hashes!
  • map.has - returns true if the map contains the specified key.
  • map.get - returns the value for the specified key.
  • map.set - sets the value for the specified key.
  • map.remove - removes the entry for specified key.
  • map.keys - returns the map’s array of keys.
  • map.values - returns the map’s array of values.
  • 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.empty - returns false if the map has at least one entry.
  • map.size - returns the number of entries in the map.
  • d3.set - a shim for ES6 sets, since objects are not hashes!
  • set.has - returns true if the set contains the specified value.
  • set.add - adds the specified value.
  • set.remove - removes the specified value.
  • set.values - returns the set’s array of values.
  • set.forEach - calls the specified function for each value in the set.
  • set.empty - returns true if the set has at least one value.
  • set.size - returns the number of values in the set.

Math

  • d3.random.normal - генерация случайного значения с нормальным распределением.
  • d3.random.logNormal - генерация случайного значения с логнормальным распределением.
  • d3.random.bates - generate a random number with a Bates distribution.
  • d3.random.irwinHall - generate a random number with an Irwin–Hall distribution.
  • d3.transform - compute the standard form of a 2D matrix transform.

Loading External Resources

  • d3.xhr - запрашивать ресурс с использованием XMLHttpRequest.
  • xhr.header - установить заголовок запроса.
  • xhr.mimeType - set the Accept request header and override the response MIME type.
  • xhr.response - set a response mapping function.
  • xhr.get - GET запрос.
  • xhr.post - POST запрос.
  • xhr.send - issue a request with the specified method and data.
  • xhr.abort - abort an outstanding request.
  • xhr.on - add an event listener for "progress", "load" or "error" events.
  • d3.text - запрос текстового файла.
  • d3.json - запрос данных в формате JSON.
  • d3.html - запрос HTML документа.
  • d3.xml - запрос XML документа.
  • d3.csv - запрос данных в формате СSV.
  • d3.tsv - запрос данных в формате TSV.

String Formatting

  • d3.format - форматировать число в виде строки.
  • d3.formatPrefix - returns the SI prefix for the specified value and precision.
  • d3.requote - quote a string for use in a regular expression.
  • d3.round - rounds a value to some digits after the decimal point.

CSV Formatting (d3.csv)

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

Localization

Colors ##Цвета

  • d3.rgb - specify a color in RGB space.
  • 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.
  • d3.hsl - specify a color in HSL space.
  • 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.
  • d3.lab - specify a color in L*a*b* space.
  • 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.
  • d3.hcl - specify a color in HCL 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.

Namespaces ##Пространство имён

Internals

  • d3.functor - create a function that returns a constant.
  • d3.rebind - rebind an inherited getter/setter method to a subclass.
  • d3.dispatch - create a custom event dispatcher.
  • 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

  • d3.svg.line - create a new line generator.
  • line - generate a piecewise linear curve, as in a line chart.
  • line.x - get or set the x-coordinate accessor.
  • line.y - get or set the y-coordinate accessor.
  • line.interpolate - get or set the interpolation mode.
  • line.tension - get or set the cardinal spline tension.
  • line.defined - control whether the line is defined at a given point.
  • d3.svg.line.radial - create a new radial line generator.
  • line - generate a piecewise linear curve, as in a polar line chart.
  • line.radius - get or set the radius accessor.
  • line.angle - get or set the angle accessor.
  • line.defined - control whether the line is defined at a given point.
  • d3.svg.area - create a new area generator.
  • area - generate a piecewise linear area, as in an area chart.
  • area.x - get or set the x-coordinate accessors.
  • area.x0 - get or set the x0-coordinate (baseline) accessor.
  • area.x1 - get or set the x1-coordinate (topline) accessor.
  • area.y - get or set the y-coordinate accessors.
  • area.y0 - get or set the y0-coordinate (baseline) accessor.
  • area.y1 - get or set the y1-coordinate (topline) accessor.
  • area.interpolate - get or set the interpolation mode.
  • area.tension - get or set the cardinal spline tension.
  • area.defined - control whether the area is defined at a given point.
  • d3.svg.area.radial - create a new area generator.
  • area - generate a piecewise linear area, as in a polar area chart.
  • area.radius - get or set the radius accessors.
  • area.innerRadius - get or set the inner radius (baseline) accessor.
  • area.outerRadius - get or set the outer radius (topline) accessor.
  • area.angle - get or set the angle accessors.
  • area.startAngle - get or set the angle (baseline) accessor.
  • area.endAngle - get or set the angle (topline) accessor.
  • area.defined - control whether the area is defined at a given point.
  • d3.svg.arc - create a new arc generator.
  • arc - generate a solid arc, as in a pie or donut chart.
  • arc.innerRadius - get or set the inner radius accessor.
  • arc.outerRadius - get or set the outer radius accessor.
  • arc.startAngle - get or set the start angle accessor.
  • arc.endAngle - get or set the end angle accessor.
  • arc.centroid - compute the arc centroid.
  • d3.svg.symbol - create a new symbol generator.
  • symbol - generate categorical symbols, as in a scatterplot.
  • symbol.type - get or set the symbol type accessor.
  • symbol.size - get or set the symbol size (in square pixels) accessor.
  • d3.svg.symbolTypes - the array of supported symbol types.
  • d3.svg.chord - create a new chord generator.
  • chord - generate a quadratic Bézier connecting two arcs, as in a chord diagram.
  • chord.radius - get or set the arc radius accessor.
  • chord.startAngle - get or set the arc start angle accessor.
  • chord.endAngle - get or set the arc end angle accessor.
  • chord.source - get or set the source arc accessor.
  • chord.target - get or set the target arc accessor.
  • d3.svg.diagonal - create a new diagonal generator.
  • diagonal - generate a two-dimensional Bézier connector, as in a node-link diagram.
  • diagonal.source - get or set the source point accessor.
  • diagonal.target - get or set the target point accessor.
  • diagonal.projection - get or set an optional point transform.
  • d3.svg.diagonal.radial - create a new diagonal generator.
  • diagonal - generate a two-dimensional Bézier connector, as in a node-link diagram.

Axes

Controls

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

d3.time (Time)

Time Formatting ##Форматирование времени

Time Scales

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

Time Intervals

d3.layout (Layouts)

Bundle

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

Chord

Cluster

Force

  • d3.layout.force - позиционирование связанных вершин методом физического моделирования.
  • force.on - listen to updates in the computed layout positions.
  • force.nodes - получение или установка массива вершин, участвующих в симуляции.
  • force.links - получение или установка массива связей между вершинами.
  • force.size - получить или установить размер макета в "х" и "у" координатах.
  • force.linkDistance - получить или установить расстояние связи.
  • force.linkStrength - получить или установить силу связи.
  • force.friction - получить или установить коэффициент трения.
  • force.charge - получить или установить силу заряда.
  • force.chargeDistance - получить или установить максимальное расстояние заряда.
  • force.gravity - получить или установить силу тяжести.
  • force.theta - get or set the accuracy of the charge interaction.
  • force.start - запустить или перезапустить моделирование, когда узлы изменены.
  • force.resume - reheat the cooling parameter and restart simulation.
  • force.stop - немедленное прерывание симуляции.
  • force.alpha - get or set the layout's cooling parameter.
  • force.tick - запуск одного шага симуляции.
  • force.drag - добавление обработчика прикосновения к вершинам. Может использоваться для перетаскивания объектов.

Hierarchy

Histogram

Pack

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

Partition

Pie

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

Stack

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

Tree

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

Treemap

d3.geo (Geography)

Paths

Projections

Streams

d3.geom (Geometry)

Voronoi

  • d3.geom.voronoi - create a Voronoi layout with default accessors.
  • voronoi - compute the Voronoi tessellation for the specified points.
  • 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.clipExent - 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.

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 - создать поведение изменения масштаба.
  • zoom - применяет поведение изменения масштаба к выбранным элементам.
  • zoom.scale - текущий масштабный коэффициент.
  • zoom.translate - the current translate offset.
  • zoom.scaleExtent - дополнительные ограничения на коэффициент масштабирования.
  • zoom.center - an optional focal point for mousewheel zooming.
  • zoom.size - размеры окна просмотра.
  • 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.on - listeners for when the scale or translate changes.
  • zoom.event - dispatch zoom events after setting the scale or translate.