add tooltips

static/js/generalText.js

@@ -2,12 +2,30 @@ var tsvPath
 var stopwords = []
 
 const init = () => {
-    $(window).on('mousemove', function (e) {
+    $(window).on('mousemove', (e) => {
         $('#nodeTitle').css({
             left: e.pageX,
             top: e.pageY
         })
     })
+    $('#minRatioLabel').on('mouseenter', () => {
+        $('#nodeTitle').removeClass('hidden')
+        $('#nodeTitleContent').html('兩個相鄰單詞之間出現頻率比值的最小值，小於該值不會被演算法選擇')
+    }).on('mouseleave', () => {
+        $('#nodeTitle').toggleClass('hidden')
+    })
+    $('#maxRatioLabel').on('mouseenter', () => {
+        $('#nodeTitle').removeClass('hidden')
+        $('#nodeTitleContent').html('兩個相鄰單詞之間出現頻率比值的最大值，大於該值不會被演算法選擇')
+    }).on('mouseleave', () => {
+        $('#nodeTitle').toggleClass('hidden')
+    })
+    $('#wordcount').on('mouseenter', () => {
+        $('#nodeTitle').removeClass('hidden')
+        $('#nodeTitleContent').html('僅計算中文字的字數')
+    }).on('mouseleave', () => {
+        $('#nodeTitle').toggleClass('hidden')
+    })
 }
 
 function clearStopWord() {
@@ -123,6 +141,12 @@ function buildSentetree() {
             .on('nodeMouseleave', () => {
                 $('#nodeTitle').addClass('hidden')
             })
+            .on('linkMouseenter', (node) => {
+                $('#nodeTitle').removeClass('hidden')
+                $('#nodeTitleContent').html('連線粗細：連接的兩個單詞同時出現的頻率<br>連線顏色：同層級單詞為灰色連線，不同層級為橘色連線')
+            }).on('linkMouseleave', () => {
+                $('#nodeTitle').addClass('hidden')
+            })
         new ResizeSensor(jQuery('#d3kitRoot'), function () {
             var scale, origin;
             scale = Math.min(2, ($('#graph').outerWidth()) / ($('#d3kitRoot').outerWidth() + 60))

templates/generalTxt.html

@@ -45,17 +45,13 @@
         <p id='comment'>這是泛用文字視覺化工具，能夠簡單處理文字檔的視覺化。</p>
         <p id='comment'>支援的語言：繁體中文、英文以及所有使用空格分詞的語言。</p>
         <p id='comment'>使用繁體中文Jieba斷詞器，不保證簡體中文能夠正常使用。</p>
-        <p>參數說明：</p>
-        <p>MaxRatio：兩個相鄰的單詞之間出現頻率的最大比值</p>
-        <p>MinRatio：兩個相鄰的單詞之間出現頻率的最小比值</p>
-        <p>（演算法除了比值外還有其他參考因素，並非符合比值範圍的單詞全部都會顯示出來。）</p>
     </div>
     <div style="margin:10px;">
         <button class="general-button" type="button" id="editSWButton" style="margin:10px 0px;"
             onclick="showStopwordEditor()">編輯停用詞</button>
-        <label>Min Ratio</label>
+        <label id="minRatioLabel">Min Ratio</label>
         <input type="number" step="0.0001" id="minRatio" value="0.001" min="0.0001" max="1">
-        <label>Max Ratio</label>
+        <label id="maxRatioLabel">Max Ratio</label>
         <input type="number" step="0.0001" id="maxRatio" value="1" min="0.0001" max="1">
     </div>
     <div id='rawText' class=''>