接下來我們探讨一下具體實作：
準備工作如下：
1、利用系統中定義好的矢量資源進行反序列化來實作場景圖：
2、輕按兩下事件
本例輕按兩下會産生輸入框，在我們的HT中，GraphView預設内置了一些互動器，以實作基本的選擇、單輕按兩下、縮放、平移和編輯等互動的功能，内置的互動器有：
3、建立輸入框
在輕按兩下事件發生時，首先需要判斷發生輕按兩下事件的元素是不是場景中定義的标簽名‘temperature’和‘humidity’的node圖元，我們用clickableTags對象來儲存兩個node：
在輕按兩下的圖元是‘temperature’或者‘humidity’時，調用createInput()函數生成輸入框，createInput()代碼如下：
在createInput()函數中，用全局變量currentInput儲存着目前生成的輸入框元素，為保證再次生成輸入框時，調用removeInput()清除上次生成的輸入框元素，進而不影響性能。
4、布局
生成的輸入框應該放在哪兒？這就是layout()函數中所做的事情。layout()函數修改生成的輸入框的位置資訊，讓其在GraphView拓撲圖元件上的位置剛好的node圖元的位置相同。
以‘temperature’為例，在點選标簽名為‘temperature’的node圖元時，會在其上生成一個輸入框，擷取該node圖元的寬、高、位置資訊，并分别指派給絕對定位後輸入框的寬、高、位置，這樣即可讓輸入框剛好覆寫住node圖元。
5、平移和縮放
可能細心思考的朋友也會發現，在對整個場景圖進行平移和縮放時，按照上訴布局方式，輸入框的位置和大小卻沒有跟随着node圖元的位置進行改變，是以我們在布局時還需要思考到平移、縮放事件。
首先，layout函數的内容中，元素的寬、高、位置資訊必須加入平移和縮放産生的結果，是以，最終layout代碼如下：
其次，我們需要對平移和縮放事件添加監聽，以便能在該事件發生時，再次調用layout()函數将輸入框的位置進行同步，在這裡，我們用内置的互動器addPropertyChangeListener（簡寫為mp），監聽zoom、translateX、translateY屬性的變化：
6、更新node
大家在Demo中可以發現，我們按下Enter鍵時，輸入的文字會同步到node中，其實這裡做了兩件事： 給node設值後删除輸入框。
a、給node設值，是用一個名為setText()的函數來實作的，實作代碼如下：
在檢測輸入框中值得存在性後，給node圖元指派用到我們HT的setStyle（簡寫為s）方法。
b、删除輸入框
c、添加Enter的事件監聽器
因為沒有監聽鍵盤的内置互動器，是以我們通過graphView.getView().addEventListener直接對底層的div添加監聽。