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.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.