如何在Observablehq中使用Plot.plot函数实现长刻度文本换行？

方法1：通过tickFormat实现轻量换行 #

完全可以用tickFormat搞定，核心是给长文本插入换行符（\n），Plot会自动识别并渲染成多行刻度。

示例代码：

Plot.plot({
  x: {
    tickFormat: (d) => {
      // 方案1：每10个字符强制换行
      return d.replace(/(.{10})/g, '$1\n');
      // 方案2：按空格分割，避免截断单词（更友好）
      // return d.split(/\s+/).reduce((acc, word) => {
      //   const lastLine = acc[acc.length - 1] || '';
      //   if (lastLine.length + word.length > 10) acc.push(word);
      //   else acc[acc.length - 1] = lastLine + ' ' + word;
      //   return acc;
      // }, []).join('\n');
    }
  },
  marks: [
    Plot.barY(data, {x: 'category', y: 'value'})
  ]
})

方法2：集成D3换行逻辑到tickTransform #

如果你的D3示例是基于SVG文本的精细换行函数（比如按宽度自动拆分），可以通过Plot的tickTransform钩子操作生成的刻度元素。

假设你的D3换行函数是：

function wrap(text, width) {
  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.1; // 行高（em单位）
    const y = textEl.attr("y");
    const dy = parseFloat(textEl.attr("dy"));
    let tspan = textEl.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(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = textEl.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

集成到Plot的方式：

Plot.plot({
  x: {
    tickTransform: (el) => {
      // 给每个刻度文本应用换行，指定宽度（比如80px）
      wrap(d3.select(el).selectAll("text"), 80);
    }
  },
  marks: [
    Plot.barY(data, {x: 'category', y: 'value'})
  ]
})

注意事项 #

• tickFormat加\n的方式更轻量，适合简单场景，Plot会自动处理多行布局
• tickTransform结合D3的wrap函数更灵活，适合需要精确控制换行宽度、避免截断单词的复杂场景
• 在Observable中需提前导入D3：import * as d3 from "d3"

内容的提问来源于stack exchange，提问作者dergroncki