javascript - examples - ¿Por qué los ejes de mi figura D3 SVG no se actualizarán?

svg d3

Question

Tengo un diagrama de dispersión D3 simple que cambio entre mostrar varios atributos diferentes de mis datos, pero mientras puedo obtener los puntos de datos para cambiar (y para hacer la transición como quiero), y puedo cambiar las etiquetas a los ejes de la figura, no se pueden actualizar los ejes ellos mismos (y mucho menos la transición).

Sospecho que estoy haciendo algo en el orden incorrecto, o estoy perdiendo un paso, pero no puedo deducir de la documentación o los ejemplos de los que estoy trabajando lo que me estoy perdiendo.

¿Cómo obtengo mis ejes para actualizar junto con mis datos?

El misterio surge del comportamiento al final del código vinculado:

d3.select("#distancefig").on("click", function () {
d3.event.preventDefault();
updatePlot(''distancefig'', false);
});
d3.select("#speedfig").on("click", function () {
d3.event.preventDefault();
updatePlot(''speedfig'', false);
});
d3.select("#distspeedfig").on("click", function () {
d3.event.preventDefault();
updatePlot(''distspeedfig'', false);
});
updatePlot(''distancefig'', true);

Aquí el updatePlot final y explícito actualiza todo como se esperaba (y cambiar el argumento lo cambia todo - ejes, etiquetas, puntos - como debería), pero las llamadas invocadas al hacer clic en los enlaces cambian solo los puntos de datos y las etiquetas; no actualizan los ejes.

Answer 1

En cada uno de los manejadores de clics, está pasando "falso" como segundo argumento. En la última declaración, estás pasando "verdadero". Podria ser esta la causa?

Answer 2

No estoy familiarizado con la forma en que estructuraste tu código, pero básicamente pondría todo lo que sucede con la base de datos dentro de la función callback d3.csv, por lo que la parte final, con respecto a la funcionalidad del texto, tendría la actualización de la x y eje y con el dominio actualizado, como:

d3.csv{
//select the text then add the onclick event
.on("click" function () {
x.domain(d3.extent(dataset, function (d) { return /* your updated value here */); })).nice();
//select the x-axis and then add this:
.transition()
.duration(1500)
.call(xAxis);
//then do the same for the y axis
};}

El paso crítico es asegurarse de seleccionar los ejes correctamente .