Actualizar el eje y de un gráfico de área cepillada
Estoy usando d3.js, y estoy trabajando en un gráfico de área cepillada modificandoeste ejemplo. Además del cambio del eje x en función del pincel, me gustaría que el eje y del gráfico se vuelva a dibujar, en función de los valores y de los datos que caen dentro del pincel (similar al comportamiento deun gráfico de Google Finance).
He conseguido que la funcionalidad funcione, pero solo de una manera que permite dibujar el pincel tanto en el espacio x como en el espacio y. Hice esto agregando primero una escala y a labrush
variable:
var brush = d3.svg.brush()
.x(x2)
.y(y2)
.on("brush", brush);
Esto hacebrush.extent()
devuelve la siguiente matriz multidimensional:[ [x0, y0], [x1, y1] ]
. Luego uso estos datos en elbrush()
función para redefinir el dominio xey para el gráfico de enfoque:
function brush() {
var extent = brush.extent();
x.domain(brush.empty() ? x2.domain() : [ extent[0][0], extent[1][0] ]);
y.domain(brush.empty() ? y2.domain() : [ extent[0][1], extent[1][1] ]);
focus.select("path").attr("d", area);
focus.select(".x.axis").call(xAxis);
focus.select(".y.axis").call(yAxis);
}
Esto funciona, pero al definir la escala y en la variable de pincel, el usuario ahora puede arrastrar 'cuadros' en el cuadro de enfoque, en lugar de solo poder arrastrar de oeste a este, como en el cuadro original.
Esencialmente, mi pregunta es:¿Cómo obtengo el rango de valores que caen dentro del área de un pincel, en lugar del rango del área del pincel? ¿Es esto posible?
la documentación del pincel de d3 esaquí.