Javascript библиотека d3 функция вызова

Я не могу понять, как работает d3.call() и когда и где его использовать. Здесь - ссылка, которую я пытаюсь завершить.

Может кто-нибудь, пожалуйста, объясните, что делает этот кусок?

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

svg.append("g").call(xAxis);

Ответы

Ответ 1

Я думаю, что трюк здесь состоит в том, чтобы понять, что xAxis - это функция, которая генерирует кучу элементов SVG. На самом деле это функция, возвращаемая d3.svg.axis(). Масштабные и ориентированные функции являются лишь частью синтаксиса цепочки (подробнее об этом здесь: http://alignedleft.com/tutorials/d3/chaining-methods/).

Итак, svg.append("g") добавляет элемент SVG-группы в svg и возвращает ссылку на себя в виде выделения (такой же синтаксис цепочки здесь работает). Когда вы используете call для выделения, вы вызываете функцию с именем xAxis на элементах выделения g. В этом случае вы выполняете функцию оси, xAxis, в вновь созданной и добавленной группе, g.

Если это все еще не имеет смысла, синтаксис выше эквивалентен:

xAxis(svg.append("g"));

или

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));