0
201
Vistas¿Cómo evitar la superposición y apilar leyendas de texto largas en el gráfico D3?
Tengo el gráfico D3 basado en el gráfico multilínea 3 con v7: Leyenda, esta muestra contiene algunas leyendas breves para el gráfico. En mi muestra, quiero aumentar la longitud de las leyendas y apilar los datos si es necesario, quiero evitar la superposición en las leyendas,
https://bl.ocks.org/d3noob/d4a9e3e45094e89808095a47da19808d
dataNest.forEach(function(d,i) { svg.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr("d", priceline(d.value)); // Add the Legend svg.append("text") .attr("x", (legendSpace/2)+i*legendSpace) // space legend .attr("y", height + (margin.bottom/2)+ 5) .attr("class", "legend") // style the legend .style("fill", function() { // Add the colours dynamically return d.color = color(d.key); }) .text(d.key); }); 
1 Respuestas
Responde la pregunta0
Se me ocurren dos soluciones posibles, que se muestran en este JSFiddle .
Primero, si es aceptable que la leyenda no sea parte del svg, realice la leyenda con una lista desordenada simple en un contenedor al lado del svg. Este es probablemente el mejor cuando hay un número variable de entradas de leyenda y no hay restricciones considerando el estilo a través de css. El navegador se ocupa de las longitudes variables y realiza un salto de línea automático.
En segundo lugar, si la leyenda tiene que ser parte del svg, se puede usar el método getBBox() que determina las coordenadas del rectángulo más pequeño alrededor de un objeto dentro de un svg.
En un primer paso, seleccione todas las entradas de la leyenda que se han renderizado y obtenga los cuadros delimitadores:
const bbox = svg.selectAll(".legend") .nodes() .map(legend_entry => legend_entry.getBBox());Con esta matriz y el ancho del svg, podemos calcular las posiciones para cada entrada de la leyenda:
bbox.reduce((pos, box) => { let left, right, line; if (pos.length === 0) { left = 0; line = 1; } else { /* The legend entry starts where the last one ended. */ left = pos[pos.length - 1].right; line = pos[pos.length - 1].line; } /* Cumulative width of legend entries. */ right = left + box.width; /* If right end of legend entry is outside of svg, make a line break. */ if (right > svg_width) { line = line + 1; left = 0; right = box.width; } pos.push({ left: left, right: right, line: line, }); return pos; }, []);Los márgenes y los rellenos deben incluirse manualmente en el cálculo de las posiciones. Por supuesto, uno podría obtener el ancho máximo de todas las entradas de la leyenda y hacer que todas tuvieran el mismo ancho con alineación central como en el ejemplo de d3noob.
En el JSFiddle, realicé este reposicionamiento mostrando primero una leyenda oculta y luego una adicional que es visible. Por supuesto, es posible usar solo una leyenda, pero no me arriesgaría a que el proceso de reposicionamiento sea visible en el documento renderizado.