d3.js - ejemplos - NVD3 etiquetas de barras horizontales de barras demasiado largas

install d3

Question

Tengo datos que tienen etiquetas largas, es decir:

values:
  [      
    { x : "This is a really looong label", y : 40 },
    { x : "Short label", y : 30 } 
  ]

y solo se muestra una pequeña porción del texto y el resto está oculto

Aquí hay un jsfiddle para demostrar el problema.

Idealmente, me gustaría establecer un ancho personalizado para las etiquetas y / o hacer que puedan usar múltiples líneas si se desbordan.

es posible?

Answer 1

¿Por qué no solo agregar márgenes?

var chart = nv.models.multiBarHorizontalChart()
               .margin({top: 30, right: 20, bottom: 50, left: 175});

Answer 2

La respuesta puede ser tarde, pero espero que ayude. He usado el ejemplo de etiquetas largas Wrapping de Mike Bostock con la pregunta.

Esto es lo que he hecho de manera diferente a tu código.

Margins añadidos al gráfico para hacerlo bonito:

var chart = nv.models.multiBarHorizontalChart().margin({
  top: 30, right: 20, bottom: 50, left: 100
});

Finalmente, seleccioné todos los tics de xAxis en el gráfico y apliqué la function wrap etiquetas largas de Mike Bostock .

d3.selectAll(".nv-x.nv-axis .tick text").each(function(i, e) {
  var text = d3.select(this),
    words = text.text().split(//s+/).reverse(),
    word, line = [],
    lineNumber = 0,
    lineHeight = 1.1, // ems
    y = text.attr("y"),
    dy = parseFloat(text.attr("dy")),
    tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");

  while (word = words.pop()) {
    line.push(word);
    tspan.text(line.join(" "));
    // TDOD : Make 80 a dynamic value based on the bar width/height
    if (tspan.node().getComputedTextLength() > 80) {
      line.pop();
      tspan.text(line.join(" "));
      line = [word];
      tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
    }
  }
});

Salida final

Aquí hay una versión funcional del ejemplo.

Answer 3

Lo que quieres hacer probablemente esté más allá de las capacidades de nvd3 tal como está escrito.

De hecho, acabo de encontrar un enfoque con d3 que, con cierta dificultad, podría aplicarse aquí a nvd3. Implica calcular la longitud y el tamaño de la frase sobre la marcha, y luego envolverla colocando los segmentos calculados usando coordenadas absolutas y relativas. Vea aquí para un ejemplo:

http://bl.ocks.org/mbostock/7555321

Dicho esto, cuando desee obtener este nivel de personalización, probablemente sea mejor ir con d3. Si usa nvd3 en su proyecto para otros gráficos, ya tiene acceso a d3. Y hay una serie de ejemplos de gráficos de barras horizontales usando d3 disponible en línea. Por ejemplo, este es un gran tutorial del creador de d3, Mike Bostock, en el que lo guiará por los pasos necesarios para hacer un gráfico de barras horizontales con d3, paso a paso:

http://bost.ocks.org/mike/bar/

Y algunos ejemplos de un gráfico de barras horizontal usando d3:

• http://jsfiddle.net/datashaman/rBfy5/4/light/
• http://bl.ocks.org/mbostock/1389927

Incluso con d3, donde tiene fácil acceso a las referencias svg subyacentes, es difícil obtener texto para envolver en svg. De hecho, la versión de svg que la mayoría de los navegadores usan ni siquiera tiene soporte para svg text wrapping.

Para evitar esta limitación, puede usar el enfoque al que he vinculado anteriormente, que implica calcular la longitud de la frase sobre la marcha y posicionar dinámicamente 1 o más segmentos utilizando el sistema de coordenadas. Sin embargo, el enfoque más fácil es probablemente insertar un elemento HTML dentro del elemento svg utilizando el elemento foreignObject . Una vez que tenga ese div HTML, puede establecer fácilmente el ancho y el texto se ajustará automáticamente.

Para más detalles sobre cómo hacer esto:

Ajuste de línea automático en texto SVG

Si tiene problemas para ajustar el texto con este enfoque, pregunte al respecto en otra pregunta y con gusto lo ayudaré.