Cómo crear un histograma usando d3.js y datos de filtro cruzado?

Question

Aquí está mi demo (enlace permanente; podría tardar un segundo en cargarse).

Estoy teniendo algunos problemas con ella:

1. clave El crossfilter no refleja el límite superior. Por lo tanto, el eje x falta un paso.

   

   me las arreglé para fijarlo al obtener un tamaño de grupo a paso (group.all()[1] - group.all()[0]) y después de añadir a la d3.extent(group.all())[1]. Debido a que es una solución sucia, no incluí esto en la demostración (puede haber una brecha de datos). ¿Cuál es una forma menos sucia de obtener el tamaño de paso de grupo/corregir el eje x?

2. Hay huecos desiguales entre las barras. No puedo encontrar la manera de solucionar la inconsistencia de x.scale con diferentes conjuntos de datos.

   

   I desea que la barra de anchura para adaptarse automáticamente a la anchura gráfico disponible. Por lo tanto, puedo calcular la anchura óptima bar y luego (si es necesario) cambiar el tamaño de la gráfica en sí:

   bar_width = math.round(graph_width/data_length); 
   graph_width = bar_width*data_length; 
   

   Bajo esta condición, no hay manera de x.scale puede devolver datos desiguales para cualquier valor de la clave, sin embargo, lo hace. No hay magia; Simplemente estoy pasando por alto algo. ¿Pero, qué es esto?

   Cuando x.scalees mal estado luego de deducir el bar_width del graph_width antes de ajustar el rango x.scale soluciona el problema. Sin embargo, no puedo entender la condición para detectar cuando x.scale no está actuando como se esperaba.

Answer 1

He pasado mucho tiempo tratando de encontrar la manera correcta de hacerlo. Sin embargo, terminé usando matemáticas simples para adivinar el límite superior de datos. Todavía quedan muchos problemas por resolver, como la forma de manejar visualmente los extremos.

Mi intento de desarrollar una biblioteca reutilizable histograma es accesible on github.