如何在D3.js坐标轴中使用MathML标签实现美观分数格式？

问题描述 #

想要将D3坐标轴的自然数标签改为美观的分数形式，尝试通过MathML传入tickFormat参数时，标签被当作纯文本显示，无法渲染成分数；但在普通段落中用html()方法却能正常显示MathML分数。

解决方案 #

方法1：用SVG foreignObject嵌入MathML #

D3生成的坐标轴刻度是SVG的<text>元素，不支持直接解析HTML/MathML，需要借助<foreignObject>嵌入可解析HTML的内容，让MathJax正常渲染：

// 先正常生成Y轴
graph.selectAll('#axisY')
     .data([null])
     .join('g')
     .attr('id', 'axisY')
     .call(d3.axisLeft(y))
     .attr('transform', `translate(${margin.left}, 0)`);

// 遍历每个刻度，替换为MathML分数
d3.select('#axisY').selectAll('.tick text')
  .each(function(d) {
    // 根据刻度值d生成对应的MathML结构
    const mathML = `<math><mrow><mfrac><mn>${d}</mn><mn>day</mn></mfrac></mrow></math>`;
    
    // 移除原有的text元素
    d3.select(this).remove();
    
    // 在刻度的g容器中添加foreignObject，嵌入HTML内容
    d3.select(this.parentNode)
      .append('foreignObject')
      .attr('width', 60) // 根据实际需要调整宽度
      .attr('height', 40) // 根据实际需要调整高度
      .append('xhtml:div')
      .html(mathML);
  });

方法2：纯CSS模拟分数样式（无需MathJax） #

如果不想依赖MathJax，可通过CSS嵌套布局模拟分数效果，更轻量：

首先添加CSS样式：

.tick-fraction {
  display: inline-block;
  text-align: center;
  line-height: 1.2;
}
.tick-fraction .num {
  border-bottom: 1px solid #000;
  font-size: 0.8em;
}
.tick-fraction .den {
  font-size: 0.8em;
}

然后修改坐标轴刻度：

// 生成Y轴
graph.selectAll('#axisY')
     .data([null])
     .join('g')
     .attr('id', 'axisY')
     .call(d3.axisLeft(y))
     .attr('transform', `translate(${margin.left}, 0)`);

// 替换刻度内容为CSS分数结构
d3.select('#axisY').selectAll('.tick text')
  .each(function(d) {
    d3.select(this).remove();
    d3.select(this.parentNode)
      .append('foreignObject')
      .attr('width', 60)
      .attr('height', 40)
      .append('xhtml:div')
      .html(`<div class="tick-fraction">
                <div class="num">${d}</div>
                <div class="den">day</div>
              </div>`);
  });

方法3：Unicode分数字符（适用于常见简单分数） #

如果刻度是常见的分数值（如0.25、0.5等），可以直接使用Unicode预定义的分数字符，无需额外渲染：

// 定义分数映射表
const fractionChars = {
  1: '1',
  0.5: '½',
  0.25: '¼',
  0.75: '¾',
  0.33: '⅓',
  0.67: '⅔'
};

// 生成Y轴时使用映射
graph.selectAll('#axisY')
     .data([null])
     .join('g')
     .attr('id', 'axisY')
     .call(d3.axisLeft(y)
             .tickFormat(d => `${fractionChars[d] || d}/day`)
     )
     .attr('transform', `translate(${margin.left}, 0)`);

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