原创 d3力導圖繪製節點間多條關係平行線的方法

之前用d3做了多條線之間的繪圖是曲線表示的，現在產品要求改成平行線的樣式，經過在網上的調研和自己的嘗試，實踐出一個可用的方法，分享給大家，先展示下結果： 事先聲明，本方法是在以下參考網站上進行的結合和更改： d3力導圖節點間多條線的繪圖方

2020-03-12 15:55:24

原创 前端調試小技巧之console.log

我們在寫前端代碼的時候，經常需要打印信息到控制檯，經常使用到的命令就是console.log，本文主要介紹幾種可常用的一些小技巧，便於調試時候的靈活利用。 1、顯示樣式 默認的 console.log 顯示如下： 那如果我們希望有顏色標記

2020-02-20 15:53:12

原创 vue項目--瀏覽器出現卡頓及崩潰的原因查找與解決方案

最近客戶反應在操作頁面的過程中出現了卡頓甚至交互多一點瀏覽器直接崩潰了。項目的技術是vue + svg 所以我一直在想是不是svg交互導致的，但是svg涉及的交互也不是很多，不至於產生崩潰狀態呀！後來又懷疑是代碼問題，於是對大家都知道的一些

2020-02-20 15:53:12

原创 劃詞標註2-使用花括號概括信息

實現交互 在【劃詞標註1】的博文中，實現瞭如何給文字加入底色，本篇主要描述如何使用花括號概括信息： 如圖，就是如何給一段文本在上面或者下面繪製花括號並標註信息 實現思路 看起來簡單，實現的過程中有很多細節需要處理：比如位置信息的獲取，重疊

2019-12-22 14:34:28 1

原创 vscode 格式化代碼 與 eslint 有衝突的問題解決

項目中配置了eslint後，在使用vue界面裏格式化的時候總是不一致。然後在配置中加了配置也無效（File - Preference - Setting） 查了下原因是在vue開發的時候我們一般都安裝了Vetur的插件來對.vue格式的文件

2019-12-20 14:38:10 4

原创 劃詞標註1——使用svg繪製換行文本並自動識別庫中字典數據

業務需求 給出一段文本，自動識別出文本中包含的關鍵字信息，關鍵字是庫裏已知的數據，根據類型的不同顯示出不同的顏色 業務分析 1）採用css：文本識別出來後，根據識別出的文本更改對應文本的dom，通過更改css來實現 缺點：比較麻煩，只能標註

2019-11-27 14:36:13

原创 記錄JS如何使用廣度遍歷找到節點的所有父節點

我們在實際的工作業務場景中經常遇到這樣的場景，求取樹數據中某個節點的父親節點以及所有的父親節點，這樣的場景下不建議使用深度遍歷，使用廣度遍歷可以更快找到。 1、案例解說 比如樹的長相是這樣的： 樹的數據是這樣的： 是我們常用的樹的數據及

2019-10-22 14:30:16

原创 記錄使用echarts的graph類型繪製流程圖全過程（二）- 關係和圓形圖片的設置

本文主要記錄流程圖關係和圓形圖片的設置本文主要記錄流程圖關係和圓形圖片的設置 圖片的設置 echarts默認的symbol參數，顯示的圖片是矩形的（如上圖所示），而我們在流程圖的繪製過程中，一般用到的是圓形，這時候就需要我們自己進行剪切了

2019-10-09 14:34:53

原创 記錄使用echarts的graph類型繪製流程圖全過程（一）-x，y位置的計算

先說下本次案例業務需求，輸入2個節點，獲取數據後繪製出2個節點間的路徑，之前使用的是網狀圖，但是網狀圖的效果不佳，需要轉換成流程圖的模式： 那麼如何在不修改數據的情況下，實現類似效果尼？ 看了下echarts的graph類型，可以實現類似

2019-10-09 14:34:53

原创 關於對數組的操作（去重，取不同元素，取相同元素）

我們在項目實踐的過程中經常遇到的問題或者面試的時候經常被問到的問題就是對數組的操作，老生常談的問題有：去重、取不同、取相同，本文主要記錄這些常用的操作的簡單、高效的實現方法。 1、數組去重 // 去重方法1--對象方法(es5)

2019-08-23 14:30:36 2

原创 D3力布圖繪製--節點自己連自己的實現

案例分析 先看下實現的效果圖 實現方法 本篇是在之前寫的博文 D3力布圖繪製--節點間的多條關係連接線的方法 基礎上加修改的，這裏放上修改的代碼，其他的一樣 // DATA var nodes = [{}]; va

2019-08-10 14:41:37

原创 webpack入門配置步驟詳解

1、初始化 1、npm install webpack webpack-cli webpack-dev-server --g 全局安裝必要的第三方插件 2、mkdir config dist src 新建三個文件夾 3、npm init -

2019-08-10 14:41:37

原创 D3力布圖繪製--節點跑掉，單曲線彎曲問題記錄

D3力布圖繪製中遇到的交互問題，頻繁操作數據後，會出現節點跑掉和單曲線彎曲的問題 問題描述 在id指向都正常的情況下出現以下2種狀況： 單曲線彎曲 節點跑掉 經排查，是數據重複導致的問題 線條也是一樣的，所以在繪製過程中請保持節點數據

2019-07-28 14:51:13

原创 這些年，我們常用到的正則表達式彙總

我們在項目中經常會用到一些正則表達式，將常用的正則做個歸納，方便後期查找 正則字符的簡要說明 "^" ： ^會匹配行或者字符串的起始位置，有時還會匹配整個文檔的起始位置 "$" ： $會匹配行或字符串的結尾 "\d"： 匹配數字 "\s"：

2019-07-12 14:31:12

原创 d3.js: 在曲線路徑上添加文本標記的正確方式

今天遇到一個在曲線路徑上標識文本標記的問題，找到一個比較好的解決思路，在這裏分享下： 使用d3建立的Force Layout，加上自定義的箭頭形狀，將多條連接線線改成弧線（https://www.cnblogs.com/webhmy/p/1

2019-06-08 14:25:22 85