Principiante de D3.js aquí. Tengo un gráfico de barras apiladas horizontales en D3 que solo tiene 1 valor en cada barra (por lo tanto, cada barra se divide en dos valores).
Como esto:
val1 --------@@@@@@@@ val2 ----@@@@@@@@@@@@ val3 -----------@@@@@Normalmente, D3 solo admite un título para cada barra, como se muestra arriba. Lo que busco es, en lugar de un título, escribir una etiqueta en los extremos opuestos de la barra. Como esto:
val1 --------@@@@@@@@ valA val2 ----@@@@@@@@@@@@ valB val3 -----------@@@@@ valCEsto podría lograrse escribiendo el texto directamente al comienzo de cada barra, pero si una barra está al 0 %, entonces el texto se superpondrá con la otra barra al 100 %. Otra opción sería alinear a la izquierda/derecha, pero tampoco sé cómo hacerlo.
Probablemente haya más de una forma de hacer esto, con la esperanza de que algún gurú de D3 salte y me dé algunos consejos.
¿Tal vez haya alguna forma de dibujar etiquetas personalizadas en un gráfico típico? Entonces podría mantener las etiquetas de la izquierda y dibujar mis personalizadas a la derecha de cada barra. No sé qué funciones usaría para eso.
Aquí hay un gráfico de muestra que se puede usar para demostrar la función de etiqueta. El gráfico está usando la orientación "incorrecta" en comparación con lo que estoy preguntando, pero probablemente pueda adaptar la respuesta:
https://www.d3-graph-gallery.com/graph/barplot_stacked_percent.html
Así es como podría agregar algunas etiquetas en la parte superior del gráfico vinculado:
svg.append('g') // add a new group .selectAll('text') // new empty selection .data(groups) // bind group names .enter() // add elements for new data .append('text') // text elements .text(function(d) { return d}) // use the group names for the text .attr("x", function(d) { return x(d) + x.bandwidth()/2; }) // position the text in the middle of the appropriate bar .attr('y', -1) // raise the text slightly .style('font-size', 10) .style('text-anchor','middle')