Webページ上の依存関係解析木の可視化

Question

依存性解析ツリーの例を以下に示します。私は、HTML Webページ上でそれを視覚化したい

は、いずれかは私にいくつかの例や方向性を示すことができますか？ 私はC/C++、Pythonに精通していますが、html/javascriptに精通していません。

多くの感謝！

Answer 1

隠密JSONへの出力およびD3のようないくつかのjsグラフライブラリに渡し、ラファエルなど

Demo & Reference

例えば

ため 解析ツリーは、「私は何をするつもりですオースティンのSXSWでのNLPに関するセミナー "

は

(ROOT 
    (S 
    (NP (PRP I)) 
    (VP (VBP am) 
     (VP (VBG going) 
     (S 
      (VP (TO to) 
      (VP (VB do) 
       (NP 
       (NP (DT a) (NN seminar)) 
       (PP (IN on) 
        (NP (NNP NLP)))) 
       (PP (IN at) 
       (NP (NNP SXSW))) 
       (PP (IN in) 
       (NP (NNP Austin)))))))) 
    (. .))) 

は

[{ 
    "data": { 
     "type": "ROOT" 
    }, 
    "children": [{ 
     "data": { 
      "type": "S" 
     }, 
     "children": [{ 
      "data": { 
       "type": "NP" 
      }, 
      "children": [{ 
       "data": { 
        "type": "PRP" 
       }, 
       "children": [{ 
        "data": { 
         "ne": "O", 
         "word": "I", 
         "type": "TK", 
         "pos": "PRP" 
        }, 
        "children": [] 
       }] 
      }] 
     }, { 
      "data": { 
       "type": "VP" 
      }, 
      "children": [{ 
       "data": { 
        "type": "VBP" 
       }, 
       "children": [{ 
        "data": { 
         "ne": "O", 
         "word": "am", 
         "type": "TK", 
         "pos": "VBP" 
        }, 
        "children": [] 
       }] 
      }, { 
       "data": { 
        "type": "VP" 
       }, 
       "children": [{ 
        "data": { 
         "type": "VBG" 
        }, 
        "children": [{ 
         "data": { 
          "ne": "O", 
          "word": "going", 
          "type": "TK", 
          "pos": "VBG" 
         }, 
         "children": [] 
        }] 
       }, { 
        "data": { 
         "type": "S" 
        }, 
        "children": [{ 
         "data": { 
          "type": "VP" 
         }, 
         "children": [{ 
          "data": { 
           "type": "TO" 
          }, 
          "children": [{ 
           "data": { 
            "ne": "O", 
            "word": "to", 
            "type": "TK", 
            "pos": "TO" 
           }, 
           "children": [] 
          }] 
         }, { 
          "data": { 
           "type": "VP" 
          }, 
          "children": [{ 
           "data": { 
            "type": "VB" 
           }, 
           "children": [{ 
            "data": { 
             "ne": "O", 
             "word": "do", 
             "type": "TK", 
             "pos": "VB" 
            }, 
            "children": [] 
           }] 
          }, { 
           "data": { 
            "type": "NP" 
           }, 
           "children": [{ 
            "data": { 
             "type": "NP" 
            }, 
            "children": [{ 
             "data": { 
              "type": "DT" 
             }, 
             "children": [{ 
              "data": { 
               "ne": "O", 
               "word": "a", 
               "type": "TK", 
               "pos": "DT" 
              }, 
              "children": [] 
             }] 
            }, { 
             "data": { 
              "type": "NN" 
             }, 
             "children": [{ 
              "data": { 
               "ne": "O", 
               "word": "seminar", 
               "type": "TK", 
               "pos": "NN" 
              }, 
              "children": [] 
             }] 
            }] 
           }, { 
            "data": { 
             "type": "PP" 
            }, 
            "children": [{ 
             "data": { 
              "type": "IN" 
             }, 
             "children": [{ 
              "data": { 
               "ne": "O", 
               "word": "on", 
               "type": "TK", 
               "pos": "IN" 
              }, 
              "children": [] 
             }] 
            }, { 
             "data": { 
              "type": "NP" 
             }, 
             "children": [{ 
              "data": { 
               "type": "NN" 
              }, 
              "children": [{ 
               "data": { 
                "ne": "ORGANIZATION", 
                "word": "NLP", 
                "type": "TK", 
                "pos": "NN" 
               }, 
               "children": [] 
              }] 
             }] 
            }] 
           }] 
          }, { 
           "data": { 
            "type": "PP" 
           }, 
           "children": [{ 
            "data": { 
             "type": "IN" 
            }, 
            "children": [{ 
             "data": { 
              "ne": "O", 
              "word": "at", 
              "type": "TK", 
              "pos": "IN" 
             }, 
             "children": [] 
            }] 
           }, { 
            "data": { 
             "type": "NP" 
            }, 
            "children": [{ 
             "data": { 
              "type": "NNP" 
             }, 
             "children": [{ 
              "data": { 
               "ne": "ORGANIZATION", 
               "word": "SXSW", 
               "type": "TK", 
               "pos": "NNP" 
              }, 
              "children": [] 
             }] 
            }] 
           }] 
          }, { 
           "data": { 
            "type": "PP" 
           }, 
           "children": [{ 
            "data": { 
             "type": "IN" 
            }, 
            "children": [{ 
             "data": { 
              "ne": "O", 
              "word": "in", 
              "type": "TK", 
              "pos": "IN" 
             }, 
             "children": [] 
            }] 
           }, { 
            "data": { 
             "type": "NP" 
            }, 
            "children": [{ 
             "data": { 
              "type": "NNP" 
             }, 
             "children": [{ 
              "data": { 
               "ne": "LOCATION", 
               "word": "Austin", 
               "type": "TK", 
               "pos": "NNP" 
              }, 
              "children": [] 
             }] 
            }] 
           }] 
          }] 
         }] 
        }] 
       }] 
      }] 
     }, { 
      "data": { 
       "type": "." 
      }, 
      "children": [{ 
       "data": { 
        "ne": "O", 
        "word": ".", 
        "type": "TK", 
        "pos": "." 
       }, 
       "children": [] 
      }] 
     }] 
    }] 
}] 

とcan be drawn using d3に変換することができることになります。

Answer 2

あなたは、彼らが元のために、我慢してきたデモでRaphaël JS

ルック使用していることを行うことができるはず：正しい方向にあなたを指している必要があり、曲線など。を持つものを。

注：上記のコードではJSでコード化する必要がありますが、JSは非常に簡単です。あなたはおそらくラファエルと一緒に真っ直ぐに出発し、あなたが行くように部品を拾うことができます。

幸運。