d3.js - tiempo - graficas html javascript

dc.js-Gráfico de barras apiladas con un filtro de contenedor vacío que se muestra de forma extraña

Question

Intento tener un gráfico de barras apiladas y eliminar los contenedores vacíos, el gráfico de barras no parece mostrarse correctamente. Está agregando espacios en blanco dentro de las barras. El filtrado funciona bien.

Probablemente se explica mejor al echar un vistazo a este violín

http://jsfiddle.net/northside45/xdcvr2kf/

Mis filtros se ven así

var personDim = ndx.dimension(function (d) {return d.person;});
var personDimGroup = personDim.group().reduceSum(function (d) { return d.amount; });
var personDimGroup2 = personDim.group().reduceSum(function(d) {return d.amount2;});
var personDimGroup_filtered_group = remove_empty_bins(personDimGroup);
var personDimGroup2_filtered_group = remove_empty_bins(personDimGroup2);

¿Hice algo malo?

Answer 1

El problema es porque en data philip tiene amount = 0. Dentro de su función, filtra los registros que tienen valor = 0

function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return value !=0 ;
});
}
};
} 

Por lo tanto, la función personDimGroup_filtered_group.all () debería devolver 3 valores cada uno para philip, steve y robert, pero devuelve 2, es decir, steve y robert porque para philip el valor es 0, por lo que la barra de bloques se rompe.

El código debería haber sido:

function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return true;
});
}
};
}

El violín de trabajo está aquí: http://jsfiddle.net/cyril123/xdcvr2kf/4/

Answer 2

Guau, ese es un comportamiento bastante horrible. Lo que está sucediendo aquí es que a la pila mixin no le gusta tener un conjunto diferente de valores X para cada pila. El gráfico se muestra bien si no se usa remove_empty_bins (como lo demuestra la respuesta de remove_empty_bins , que simplemente lo desactiva).

Es un problema más difícil eliminar contenedores vacíos en un conjunto de grupos y hacer que todos tengan los mismos contenedores. El problema no está realmente demostrado por este conjunto de datos, porque todos los contenedores son utilizados por al menos un grupo, y remove_empty_bins no es útil aquí, pero creo que obtengo lo que estás buscando.

Creo que lo más "fácil" de hacer es crear un grupo combinado con todos los datos y luego usar accesos para los stacks:

function combine_groups() {
var groups = Array.prototype.slice.call(arguments);
return {
all: function() {
var alls = groups.map(function(g) { return g.all(); });
var gm = {};
alls.forEach(function(a, i) {
a.forEach(function(b) {
if(!gm[b.key]) {
gm[b.key] = new Array(groups.length);
for(var j=0; j<groups.length; ++j)
gm[b.key][j] = 0;
}
gm[b.key][i] = b.value;
});
});
var ret = [];
for(var k in gm)
ret.push({key: k, value: gm[k]});
return ret;
}
};
}
var combined = combine_groups(personDimGroup_filtered_group, personDimGroup2_filtered_group);
barChart
.width(500)
.height(250)
.dimension(personDim)
.group(combined, "1", function(d) { return d.value[0]; })
.stack(combined, "2", function(d) { return d.value[1]; })
.elasticY(true)
.elasticX(true)
.xUnits(dc.units.ordinal)
.x(d3.scale.ordinal()); 

Tenedor de trabajo de tu violín: http://jsfiddle.net/gordonwoodhull/uwczq9n1/5/