2012-03-05 152 views
9

語言語法樹的輸入是之一:渲染在瀏覽器

(1)樹的括號內表示與諸如標記內部節點:

(S (N John) (VP (V hit) (NP (D the) (N ball)))) 

與輸出:

enter image description here

(是否虛線以及標題是否存在並不重要)

或輸入可以是:

(2)上的話一個包圍沒有標籤,例如:

((John) ((hit) ((the) (ball)))) 

具有輸出與上述相同的(沒有內部標籤。此時,正好樹結構)。

輸入的另一個組件是樹是否標記爲(1)或未標記爲(2)。


我的問題:什麼是呈現在JavaScript瀏覽器這些樹的最佳方式(發展最快的時間)?一切都應該發生在客戶端。

我想象一個簡單的界面只有一個文本框(和一個單選按鈕,指定它是否是一個標記的樹),更改時,觸發樹渲染(如果輸入沒有任何語法錯誤)。

回答

4

實際上有服務器端庫將括號內的表示轉換爲樹,phpsyntaxtree
您可以使用javascript圖形庫(如jsdraw2d)重新實現它們,或使用HTML5畫布在JavaScript上滾動您。

10 Best Javascript Drawing and Canvas Libraries

+0

謝謝,這是一個很棒的鏈接!這是我想要的幾乎完美的替代品。我只是希望它也接受括號而不是方括號的輸入。 – dsg 2012-03-06 07:31:41

9

我不知道該策略是做什麼用的計算器自插頭。如果這是違反規定,我很抱歉。

你見過我的解決方案嗎? mshang.ca/syntree

這不完全是你想要的,但如果它有幫助,你可以自由地偷取code

+2

這太棒了。除括號外,你能否接受括號作爲成分的標記?例如:我希望能夠使用'(S(NP This)(VP(V is)(^ NP a wug)))'來渲染示例樹。 – dsg 2012-03-09 20:36:17

+0

我不打算這樣做,因爲我不想介紹太多特殊字符。我認爲方括號是語言學的常態。但是,我鼓勵您分解項目並根據需要進行修改。 – mshang 2012-03-10 14:30:41

+0

到目前爲止,您的解決方案是有幫助的,stackoverflow與此 – 2012-04-08 14:26:49