我的d3轴标签使用的是自然数,我希望它们的形式更漂亮,所以我试图通过MathJax使用MathML。
当我尝试使用MathML标记作为tickFormat
的参数时,它将标记视为文本,并且实际上并不以MathML形式显示它。
在我的JavaScript中,我可以让所需的分数形式正确地显示在段落中...
d3.select('.main').append('p').html('<math><mrow><mfrac><mn>$</mn> <mn>day</mn></mfrac></mrow></math>');
...但是当我尝试将相同的文本应用到我的轴上时,就像这样...
graph.selectAll('#axisY')
.data([null])
.join('g')
.attr('id', 'axisY')
.call(d3.axisLeft(y)
.tickFormat((d) => '<math><mrow><mfrac><mn>$</mn> <mn>day</mn></mfrac></mrow></math>')
)
.attr('transform', `translate(${margin.left}, 0)`);
...它像文本一样拼出所有这些标签,而不是实际显示分数。
那么,我怎样才能让tickFormat解析标签,而不是把它们当作文本来处理呢?......或者有没有更简单的方法在d3轴上有漂亮的分数?
1条答案
按热度按时间t98cgbkg1#
tickFormat
期望轴刻度标签是text
元素,而您希望使用html
(根据您的工作示例)。考虑几件事来让它工作:
1.使用
tickValues
来控制轴上显示的值的数量-如果您保持此自动状态,则分数可能会重叠,因为从屏幕真实的空间的Angular 来看,分数的渲染只是大于小数点。1.使用
foreignObject
代替text
元素来表示轴上的每个刻度。一旦使用了foreignObject
,就可以添加html,因此可以使用mathjax1.十进制到最小分数的转换-有一个建议的实现here。
工作示例如下-但请注意硬编码的大小和位置的调整,您将需要调整您的情况。