javascript - graficas - dc.js: cómo crear un gráfico de filas a partir de múltiples columnas

graficos con d3 js

Question

Necesito crear un cuadro de barras en dc.js con entradas de varias columnas en un csv. Por lo tanto, necesito asignar una columna a cada fila y el número total de columnas al valor de la fila. Puede haber una solución obvia para esto, pero no puedo encontrar ningún ejemplo. muchas gracias S

actualización: Aquí hay un boceto rápido. Disculpas por el estándar
Tabla de filas;
column1 ----------------- 64 (total de la columna 1)
column2 ------- 35 (total de la columna 2)
column3 ------------ 45 (total de la columna 3)

Answer 1

¿Estás buscando gráficos de filas apiladas? Por ejemplo, este gráfico tiene cada fila representa una categoría y cada color representa una subcategoría:

Lamentablemente, esta función aún no es compatible con DC.js. La solicitud de funciones se encuentra en https://github.com/dc-js/dc.js/issues/397 . Si está dispuesto a entrar en un código que no es de la biblioteca, puede consultar los ejemplos a los que se hace referencia en ese registro de problemas.

Alternativamente, puede usar un gráfico de barras apilables. Este enlace parece tener una buena descripción de cómo funciona esto: http://www.solinea.com/blog/coloring-dcjs-stacked-bar-charts

Answer 2

¡Problema interesante! Suena algo similar a un pivote, solicitado para filtro cruzado aquí . Una solución viene a la mente usando "grupos falsos" y "dimensiones falsas", sin embargo, hay un par de advertencias:

• reflejará filtros en otras dimensiones
• pero, no podrá hacer clic en las filas del gráfico para filtrar cualquier otra cosa (porque ¿qué registros seleccionaría?)

El constructor falso del grupo se ve así:

function regroup(dim, cols) {
    var _groupAll = dim.groupAll().reduce(
        function(p, v) { // add
            cols.forEach(function(c) {
                p[c] += v[c];
            });
            return p;
        },
        function(p, v) { // remove
            cols.forEach(function(c) {
                p[c] -= v[c];
            });
            return p;
        },
        function() { // init
            var p = {};
            cols.forEach(function(c) {
                p[c] = 0;
            });
            return p;
        });
    return {
        all: function() {
            // or _.pairs, anything to turn the object into an array
            return d3.map(_groupAll.value()).entries();
        }
    };
}

Lo que está haciendo es reducir todas las filas solicitadas a un objeto, y luego convertir el objeto en el formato de matriz dc.js espera que group.all regrese.

Puede pasar cualquier dimensión arbitraria a este constructor; no importa en qué está indexado porque no puede filtrar en estas filas ... pero es probable que desee que tenga su propia dimensión para que se vea afectada por todos los demás filtros de dimensión. Dale también a este constructor una matriz de columnas que quieras convertir en grupos y usa el resultado como tu "grupo".

P.ej

var dim = ndx.dimension(function(r) { return r.a; });
var sidewaysGroup = regroup(dim, [''a'', ''b'', ''c'', ''d'']);

Ejemplo completo aquí: http://jsfiddle.net/gordonwoodhull/37uET/6/

(Observe cómo hacer clic en las filas en el gráfico resulta en maldad, porque, ¿qué se supone que debe filtrar?)