Función de llamada d3 de la biblioteca Javascript

81

No puedo entender cómo funciona d3.call () y cuándo y dónde usarlo. Aquí está el enlace del tutorial que estoy tratando de completar.

¿Alguien puede explicar específicamente qué está haciendo esta pieza?

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

svg.append("g").call(xAxis);
javascript d3.js Andy897
fuente
el enlace que proporcionó explica lo que call()hace
Ibu
17
Sí, pero todavía no puedo obtener lo que svg.append ("g") .call (xAxis); está haciendo :(
Andy897
2
ver github.com/d3/d3-selection/blob/master/README.md#selection_call
Jason S

Respuestas:

111

Creo que el truco aquí es entender que xAxis es una función que genera un montón de elementos SVG. De hecho, es la función devuelta por d3.svg.axis(). Las funciones de escala y orientación son solo parte de la sintaxis de encadenamiento (lea más de eso aquí: http://alignedleft.com/tutorials/d3/chaining-methods/ ).

Por lo tanto, svg.append("g")agrega un elemento de grupo SVG al svg y devuelve una referencia a sí mismo en forma de selección (la misma sintaxis de cadena en el trabajo aquí). Cuando usa callen una selección, está llamando a la función nombrada xAxisen los elementos de la selección g. En este caso se está ejecutando la función del eje, xAxissobre el recién creado y el grupo anexa, g.

Si eso aún no tiene sentido, la sintaxis anterior es equivalente a:

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

o:

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));
Superboggly
fuente
¿Cómo se editarían los elementos G de un svg.axis ()? Tengo etiquetas que se mezclan entre sí y quiero aplicarles una transformación. Pero parece que no puedo acceder a esos elementos
CQM
Verifique la respuesta aquí stackoverflow.com/questions/12825630/… Después de haber seleccionado el texto o marcar los elementos, debería poder aplicar transformaciones si lo desea.
Superboggly
¿Hay alguna diferencia al hacer uno u otro para llamar a xAxis?
Me gusta el
4
Esto explica bien el .call()método en general. No explica las consecuencias de llamar al objeto eje en particular. Y no se acerca a justificar la situación surrealista de un objeto eje comportándose como un objeto y una función . ¿Por qué en el mundo hacer eso? De acuerdo, los documentos dicen que llamarlo representa el eje . ¿Es eso mejor que darle al objeto de eje un método .render ()? ¿No apoyaría eso un proceso mucho más sencilloxAxis.scale(...).orient(...).render(...)
Bob Stein
1
De los documentos en la llamada de selección: "La única diferencia es que selection.call siempre devuelve la selección y no el valor de retorno de la función llamada, nombre".
heltonbiker
5

Lo que la respuesta aceptada omitió en mi opinión es que .call()es una función API D3 y no debe confundirse con Function.prototype.call ()

selection.call(function[, arguments…])

Invoca la función especificada exactamente una vez, pasando esta selección junto con cualquier argumento opcional. Devuelve esta selección. Esto equivale a invocar la función manualmente, pero facilita el encadenamiento de métodos. Por ejemplo, para configurar varios estilos en una función reutilizable:

Ahora di:

d3.selectAll("div").call(name, "John", "Snow");

Esto es aproximadamente equivalente a:

name(d3.selectAll("div"), "John", "Snow");

La única diferencia es que selection.call siempre devuelve la selección y no el valor de retorno de la función llamada , name.

laktak
fuente