关于D3.js Aster Plot带方向的标签文本换行问题的技术问询

Great question—rotated text wrapping in radial plots like Aster Charts is a common gotcha because standard wrapping doesn’t account for rotation transforms and readability. Let’s walk through how to get your labels wrapping correctly while maintaining their directional orientation.

Step 1: Build a Reusable Text Wrapping Function #

First, we need a function that splits label text into lines (<tspan> elements) based on a maximum width. This works with rotated text as long as we set up the transform correctly first:

function wrapRotatedText(text, maxWidth) {
  text.each(function() {
    const textEl = d3.select(this);
    const words = textEl.text().split(/\s+/).reverse();
    let word;
    let line = [];
    let lineNumber = 0;
    const lineHeight = 1.2; // Adjust line spacing (ems)
    const y = textEl.attr("y") || 0;
    const dy = parseFloat(textEl.attr("dy")) || 0;
    
    // Clear existing text and add first tspan
    textEl.text(null);
    let tspan = textEl.append("tspan")
      .attr("x", 0)
      .attr("y", y)
      .attr("dy", `${dy}em`);
    
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      
      // Check if current line exceeds max width
      if (tspan.node().getComputedTextLength() > maxWidth) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        // Add new line tspan
        tspan = textEl.append("tspan")
          .attr("x", 0)
          .attr("y", y)
          .attr("dy", `${++lineNumber * lineHeight + dy}em`)
          .text(word);
      }
    }
  });
}

Step 2: Position and Rotate Labels Correctly #

The key to making wrapped rotated text look right is setting the transform origin and adjusting orientation so labels are readable (not upside-down on the left side of the plot):

const radius = 200; // Adjust to your plot's radius
const labelPadding = 15; // Space between plot edge and label

const labels = svg.selectAll(".aster-label")
  .data(yourDataArray)
  .enter()
  .append("text")
  .attr("class", "aster-label")
  .text(d => d.label)
  .attr("dy", "0.35em") // Vertical alignment
  .attr("transform", d => {
    const angle = d.angle; // Your data's angle value (in degrees)
    // Flip labels on left side for readability
    const isLeftSide = angle > 90 && angle < 270;
    const rotateAngle = isLeftSide ? angle + 180 : angle;
    const translateDistance = isLeftSide ? -(radius + labelPadding) : radius + labelPadding;
    
    return `rotate(${rotateAngle}) translate(${translateDistance}, 0)`;
  })
  // Set text anchor based on side to keep labels aligned properly
  .attr("text-anchor", d => (d.angle > 90 && d.angle < 270) ? "end" : "start");

Step 3: Apply the Wrapping Function #

Finally, call the wrapping function on your labels, specifying the maximum width you want each label to occupy:

labels.call(wrapRotatedText, 120); // Wrap text at 120px width

Key Notes to Avoid Issues #

• Adjust Line Height: Tweak the lineHeight value in the wrapping function to control spacing between wrapped lines.
• Max Width: Choose a maxWidth that fits your plot’s available space—too wide and labels will overlap, too narrow and you’ll get unnecessary line breaks.
• Transform Order: Always apply rotate before translate in your transform string—this ensures the label rotates around the correct point on the plot’s edge.

This setup should give you wrapped labels that maintain their directional orientation and look clean, matching the expected Aster Plot output you’re aiming for.

内容的提问来源于stack exchange，提问作者Amar Chand Nagisetty