javascript - 如何使用 HTML、CSS 和/或 Javascript 显示证明树？

Question

我想在网页中以自然演绎的方式显示证明树。我将从 JSON 文件中获取数据。

显示此类内容的最佳方式是什么？只有css才有可能吗？还是有一个图书馆可以做这样的事情？渲染为图像是不可能的，因为最终它应该是交互式的。我还应该提到，这棵树可以变得相当大。

例子：证明树

更新：最终结果应该是什么样子的一个更好的例子：在此处输入图像描述

score 3 · Accepted Answer

最简单的解决方案是mathjax，它是一个乳胶 javascript 渲染器。还有很多其他类似的渲染选项。

或者，您也可以查看MathML，这是用于编写数学方程式的 w3c 标准。可悲的是，现在，对它的支持非常缺乏，正如可以在这里看到的那样，但从长远来看，这将是一个很好的解决方案。此外，前面提到的MathJax可以在尚不支持 MathML 的浏览器中用作MathML 填充程序。

MathJax shim唯一需要担心的是，当你让它交互时，它会在支持和不支持 MathML 的浏览器中与你的代码进行不同的交互，但尽管如此，我个人会建议 MathML，除非你已经绑定进入 LaTeX。

根据您的更新，我不确定这是否可以用 MathML 或 LaTeX 表示，我担心您唯一能做的就是在画布上绘制它，或者如果您以后需要交互性，将其设置在 SVG 中。但我可以警告你，如果你不习惯，这将不是一件简单的事情。

为 Mathjax 添加交互性：

使用 MathML 作为输入
使用 HTML/CSS 作为输出
showMathMenu:false通过添加到您的核心 MathJax 配置来禁用 MathJax 上下文菜单
在您的 MathML 标记中包含 id（<mo id="someid">例如字面意思）
在 MathJax 完成后使用例如 jQuery 绑定到 id（即$("#someid").on("mousemove",function(){...})）

可以在这里找到一个完整的演示，移动等号以触发警报。

score 3 · Accepted Answer

我最近遇到了同样的事情，我设法写了一些我认为效果很好的 CSS。这是一个示例 html 骨架：

<div class="proof">
    <div class="prems">
        <div class="proof">
            <div class="prems">
                <div class="proof">
                    <div class="prems">
                        <div class="proof">
                            <div class="concl">
                                <div class="concl-left"></div>
                                <div class="concl-center">bla</div>
                                <div class="concl-right"></div>
                            </div>
                        </div>
                        <div class="inter-proof"></div>
                        <div class="proof">
                            <div class="concl">
                                <div class="concl-left"></div>
                                <div class="concl-center">bla</div>
                                <div class="concl-right"></div>
                            </div>
                        </div>
                    </div>
                    <div class="concl">
                        <div class="concl-left"></div>
                        <div class="concl-center">bla</div>
                        <div class="concl-right"></div>
                    </div>
                </div>
                        <div class="inter-proof"></div>
                <div class="proof">
                    <div class="concl">
                        <div class="concl-left"></div>
                        <div class="concl-center">bla</div>
                        <div class="concl-right"></div>
                    </div>
                </div>
            </div>
            <div class="concl">
                <div class="concl-left"></div>
                <div class="concl-center">bla</div>
                <div class="concl-right"></div>
            </div>
        </div>
    </div>
    <div class="concl">
        <div class="concl-left"></div>
        <div class="concl-center">blabla</div>
        <div class="concl-right"></div>
    </div>
</div>

这是CSS：

.proof
{
    display: inline-flex;
    flex-direction: column;
}
.prems
{
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}
.inter-proof
{
    border-bottom: 1px solid black;
    width: 1em;
}
.concl
{
    display: inline-flex;
    margin-top: -1px;
}
.concl-left
{
    flex-grow: 1;
}
.concl-center
{
    border-top: 1px solid black;
}
.concl-right
{
    flex-grow: 1;
}
.prems > .proof:not(:first-child) > .concl > .concl-left
{
    border-bottom: 1px solid black;
}
.prems > .proof > .concl > .concl-center
{
    border-bottom: 1px solid black;
}
.prems > .proof:not(:last-child) > .concl > .concl-right
{
    border-bottom: 1px solid black;
}

看到它住在这里。我只尝试了Firefox，它可能需要对其他浏览器进行一些调整。

score 1 · Accepted Answer

所以在摆弄了很多css之后，我使用表格来获得令人满意的结果。由于布局确实是语义的一部分，我认为在这种情况下它是可以接受的。

一个小例子如下所示：

<table>
    <tr>
        <td>
        </td>
        <td class="rulename" rowspan="2"><div class="rulename">add</div></td></tr>
    <tr><td class="conc">conclusion</td></tr>
</table>

和CSS：

td {
 text-align:center;
 height: 1em;
 vertical-align:bottom;
}
td.conc {
 border-top: solid 1px;
}
div.rulename {
 margin-top:-2em;
}

更大的演示

score 0 · Accepted Answer

我试了一下（为此），这里是代码（仅使用纯 css 和 javascript）。它只是绘制像这个图像这样的原始字符串（所以没有 LaTeX ......但我也想完成这个并且目前正在尝试）。

起点如下所示。

<style>
  #proof-tree {
      padding: 50px;
      overflow-x: scroll;
  }
  .node {
      display: inline-block;
      white-space: nowrap;
      margin: 0 2em;
      text-align: center;
  }
  .bar {
      width: 100%;
      height: 1px;
      background: black;
      position: relative;
  }
  .rule {
      position: absolute;
      bottom: -0.5em;
      right: -3em;
  }
</style>

<div id="proof-tree">
  <div class="node">
    <div class="antecedents">
      <div class="node">
    <div class="antecedents">
      <div class="node">
        <div class="antecedents"></div>
        <div class="bar"><div class="rule">rule1</div></div>
        <div class="consequent">foo1</div>
      </div>
      <div class="node">
        <div class="antecedents"></div>
        <div class="bar"><div class="rule">rule2</div></div>
        <div class="consequent">hoo2</div>
      </div>
    </div>
    <div class="bar"><div class="rule">rule3</div></div>
    <div class="consequent">foo3</div>
      </div>
      <div class="node">
    <div class="antecedents"></div>
    <div class="bar"><div class="rule">rule4</div></div>
    <div class="consequent">foo5</div>
      </div>
    </div>
    <div class="bar"><div class="rule">rule6</div></div>
    <div class="consequent">foo6</div>
  </div>
</div>

它显示为这样。

但是，这样一来，下栏往往会太长，我对此并不满意。因此，我编写了一些 javascript 来获取节点的位置并最小化条的长度。我认为这根本不是最聪明的主意。它显然很脏......但我希望这对某人（比如我）有帮助。

另外，如果您/某人有任何其他信息，请告诉我。

javascript - 如何使用 HTML、CSS 和/或 Javascript 显示证明树？

4 回答 4

Related

Reference