2

我正在尝试在标签集的 jupyter notebook 中复制https://docs.bokeh.org/en/latest/docs/user_guide/extensions_gallery/latex.html#userguide-extensions-examples-latex中提到的散景乳胶示例。我可以看到 katex.min.js 正在从 Web 控制台加载。但是，当 LatexLabel 呈现时，它会声明katex not defined。Katex JS 文档说，一旦加载了 js，它就应该在全球范围内可用。

import * as p from "core/properties"
import {LabelSet, LabelSetView} from "models/annotations/label_set"
declare const katex: any

export class LatexLabelSetView extends LabelSetView {
  model: LatexLabelSet

  render(): void {
    const draw = this._v_css_text.bind(this)
    const {ctx} = this.plot_view.canvas_view
    const [sx, sy] = this._map_data()

    for (let i = 0, end = this._text.length; i < end; i++) {
      try {
        draw(ctx, i, this._text[i], sx[i] + this._x_offset[i], sy[i] - this._y_offset[i], this._angle[i])
        katex.render(this._text[i], this.el, {displayMode: true})
      }
      catch(e) {
        console.log( 'Error: ' + e);
      }
    }
  }
}

class LatexLabelSet(LabelSet):
    __javascript__ = ["https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"]
    __css__ = ["https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"]
    __implementation__ = TypeScript(TS_CODE)

还尝试将脚本元素添加到文档根目录中。虽然没有运气。

export class LatexLabelSet extends LabelSet {
  properties: LatexLabelSet.Props

  constructor(attrs?: Partial<LatexLabelSet.Attrs>) {
    super(attrs)
  }

  static init_LatexLabelSet() {
    let jsNode = document.createElement('script')
    jsNode.id = 'bokeh-katex-js'
    jsNode.src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
    let cssNode = document.createElement('link')
    cssNode.id = 'bokeh-katex-css'
    cssNode.rel= 'stylesheet'
    cssNode.href = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
    document.getElementsByClassName('bk-root')[0].appendChild(cssNode)
    document.getElementsByClassName('bk-root')[0].appendChild(jsNode)
    this.prototype.default_view = LatexLabelSetView
  }
}

任何方向都会有所帮助。

4

2 回答 2

1

Bokeh 2.4 直接为 Bokeh 中的某些元素添加了对 LaTeX（和 MathML）的支持（无需使用扩展）。目前，您可以在轴标签、刻度标签、div 小部件和段落小部件上使用 LaTeX，这也适用于 Jupyter 笔记本。应尽快添加对更多元素的 LaTeX 支持。有关新的数学文本功能以及如何使用它们的更多信息，请参阅Bokeh 2.4 版本博文、新的黑体辐射示例和Bokeh 用户指南！

在此处输入图像描述

于 2021-09-15T18:50:22.753 回答
-1

维护人员的注意事项：在 2.4 版中添加了初始内置 LaTeX 支持，请参阅此新答案https://stackoverflow.com/a/69198423/3406693

如https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components中所述，这在笔记本中是不可能实现的。

它说

请注意，在 Jupyter Notebooks 中，不能使用组件并在同一个笔记本单元格中显示。

事实上，如果您使用下面的代码，它会打开一个带有绘图和公式的新选项卡，但如果您调用output_notebook()，则不会出现文本并且浏览器控制台会抛出Uncaught ReferenceError: katex is not defined。

p = figure(title="LaTex Demonstration")
p.line([0,0,1,1,0],[0,1,1,0,0])
latex = LatexLabel(text=r"e^{i\pi}+1=0", 
                   x=0.4, y=0.55,
                   render_mode='css', text_font_size='16pt',
                   background_fill_alpha=0)
p.add_layout(latex)
show(p)

在新标签中工作： 在职的

不在笔记本内工作： 不工作

于 2020-01-07T18:55:59.717 回答