javascript - attribute - D3-usando cadenas para tics de ejes

title html attribute

Question

Quiero crear un gráfico de barras utilizando cadenas como las etiquetas para las marcas en el eje x (por ejemplo, Año 1, Año 2, etc. en lugar de 0,1,2, etc.).

Comencé usando los valores numéricos para el eje x (por ejemplo, 0,1,2,3, etc.) de la siguiente manera:

1) genero mis rangos:

 x = d3.scale.ordinal()
.domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
.rangeRoundBands([0,width], .1);
y = d3.scale.linear()
.domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)])
.range([height, 0])
.nice();

2) Hacer los ejes:

 d3.svg.axis()
.scale(x);

3) Redibujar los ejes:

 svg.select(".axis.x_axis")
.call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

Esto funciona bien con las etiquetas del eje numérico por defecto.

Si intento usar una serie de cadenas para x tickValues ​​como este ...

 d3.svg.axis()
.scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

... cuando vuelvo a dibujar el gráfico (con o sin cambios en los datos / configuraciones), las etiquetas se intercambian de esta manera.

Observe cómo Col 1 toma el lugar de Col 0 y viceversa.

¿Sabes por que pasa esto?

Answer 1

Gracias por eso ... Utilicé esta función con una cláusula if en línea para manejar una serie de ejes x diferente con nombres en lugar de números.

La matriz de facciones consta de todos los nombres relevantes ordenados por los índices de la serie que luego se comparan con su índice correspondiente en los datos.

xAxis = d3.svg.axis().scale(xScale)
.tickFormat(function(d) {
if(seriesX == ''seriesValue''){
return factions[d]}
else{
return d}
})
.orient("bottom");

Answer 2

Actualizar

Simplemente ordene svg.pointsNames antes de aplicarlos como tickValues. Asegúrese de clasificarlos exactamente de la misma manera que ordena sus datos. De esta manera, siempre se mantiene una asignación uno a uno entre las etiquetas y los valores de marca.

También si puedo, revisa la función tickFormat` aquí. Esto me parece una mejor opción.

//Tick format example
chart,xAxis.tickFormat(function(d, i){
return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
})