Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4【一】

阿新 • • 發佈：2020-09-14

JavaScript

1.概念：一門客戶端指令碼語言

執行在客戶端瀏覽器中的。每個瀏覽器都有JavaScript的解析引擎
指令碼語言：不需要編譯，直接就可以被瀏覽器解析執行了

2.功能：

可以來增強使用者和HTML頁面的互動過程，可以來控制HTML元素，讓頁面有一些動態的效果，增強使用者的體驗。

3.JavaScript發展史：

1992年，Nombase公司，開發出第一門客戶指令碼語言，專門用於表單的校驗。命名為：C--，後來更名為：ScriptEase
1995年,Netscape(網景)公司，開發了一門客戶端指令碼語言：LiveScript。後來，請來了SUN公司的專家，修改LiveScript，命名為JavaScript
1996年，微軟抄襲JavaScript開發出JScript語言
1997年，ECMA（歐洲計算機制造商協會），ECMAScript，就是所欲客戶端指令碼語言的標準。

JavaScript=ECMCScript + JavaScript自己特有的東西（BOM+DOM）

學習過程：

ECMAScript：客戶端指令碼語言的標準

基本語法：

與html結合的方式

1.內部JS
- 定義<script>,標籤體內容就是js程式碼
2.外部JS
- 定義<script>,通過src屬性引入外部的js檔案
- 注意：
  
  ①<script>可以定義在html頁面的任何地方。但是定義的位置會影響執行順序
  
  ② <script>可以定義多個
註釋
1. 單行註釋：//註釋內容
2. 多行註釋：/註釋內容/
資料型別
1. 原始資料型別（基本資料型別）：
  1. number:數字。整數/小數/NaN（not a number 一個不是數字的數字型別）
  2. string：字串。字元/字串 "abc" "a" 'abc'
  3. boolean: true 和 false
  4. null：一個物件為空的佔位符
  5. undefined：未定義。如果變數沒有給初始化值，則會被預設賦值為undefined
2. 引用資料型別：物件
變數
1. 變數：一小塊儲存資料的記憶體空間
2. Java語言是強型別語言，而JavaScript是弱型別語言。
  - 強型別：在開闢變數儲存空間時，定義了空間來儲存的資料的資料型別。只能儲存固定型別的資料
  - 弱型別：在開闢變數儲存空間時，不定義空間將來的儲存資料型別，可以存放任意型別的資料。
3. 語法：
  - var 變數 = 初始化值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定義變數
        var a = 3;
        var b = 1.2;
        var c = NaN;

        /*
            輸出到頁面上
         */
        document.write(a+"----"+typeof (a)+"<br>");
        document.write(b+"----"+typeof (b)+"<br>");
        document.write(c+"----"+typeof (c)+"<br>");

        //定義string型別
        var str = "abc";
        var str2 = 'sde';
        document.write(str+"----"+typeof (str)+"<br>");
        document.write(str2+"----"+typeof (str2)+"<br>");
        //定義boolean
        var flag = true;
        document.write(flag+"----"+typeof (flag)+ "<br>");
        //定義 null
        var obj = null;
        var obj1 = undefined;
        var obj3 ;
        document.write(obj+"----"+typeof (obj)+"<br>");
        document.write(obj1+"----"+typeof (obj1)+"<br>");
        document.write(obj3+"----"+typeof (obj3)+"<br>");

        /*
            輸出結果：
                3----number
                1.2----number
                NaN----number
                abc----string
                sde----string
                true----boolean
                null----object
                undefined----undefined
                undefined----undefined
         */
    </script>
</head>
<body>
</body>
</html>

運算子

一元運算子：只有一個運算數的運算子

++，--，+（正號）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            ++  --:自增（自減）

            ++（--）：在前，先自增（自減），再運算

            ++（--）：在後，先運算，再自增（自減）

            +（-）：正負號

            •   注意：在JS中，如果運算數不是運算子所要求的型別，那麼js引擎會自動的將運算數進行型別轉換

            •   其他型別轉number：

            •       string轉number：按照字面值轉換，如果字面值不是數字，則轉為NaN（不是數字的數字）

            •       boolean轉number：true轉為1，false轉為0
         */
        var num = 3;
        var a = num ++;

        document.write(num+"<br>");//4
        document.write(a+"<br>");//3
        document.write("<br>");

        var b = + "ads2123";
        alert(b);//NaN

        var c = +"123";
        alert(c);//123

        var flag = + true;
        var flag1 = + false;
        var flag2 = - true;
        document.write(typeof (flag)+"-----"+flag+"<br>");//number-----1
        document.write(typeof (flag1)+"-----"+flag1+"<br>");//number-----0
        document.write(typeof (flag2)+"-----"+flag2+"<br>");//number------1
    </script>
</head>
<body>
</body>
</html>

算數運算子

/ * + - % ....

賦值運算子

= += -= .......

比較運算子

== > < >= <= ===(全等於)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            比較運算子：
                比較方式：
                    1.型別相同，直接比較
                        字串：按照字典順序比較。按位逐一比較，知道得到大小為止
                    2.型別不同:先進行型別轉換，再比較
                        === 全等於。在比較之前，先判斷型別，如果型別不一樣，則直接返回false
         */
        document.write(3 > 4 +"<br>");//false
        document.write("abc" > "ade" +"<br>");//false
        document.write(("123" == 123)+"<br>");//true
        document.write(("123" === 123)+ "<br>");//false
    </script>
</head>
<body>

</body>
</html>

邏輯運算子

&& || !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比較運算子</title>
    <script>
        /*
            邏輯運算子：
                && ： 與（短路）
                ||： 或（短路）
                ！：非
                    * 其他型別轉boolean
                        1.number：0或者NaN為假，其他為真
                        2.string：有值為true，沒有值為false
                        3.null&undefined
                        4.物件：
         */
        var flag = true;
        document.write(flag+"<br>");
        document.write(!flag+"<br>");

        document.write("<hr>");

        var num = 3;
        var num1 = 0;
        var num2= NaN;
        document.write(!num+"<br>");
        document.write(!num1+"<br>");
        document.write(!num2+"<br>");
        document.write("<hr>");

        var str1 = "abc";
        var str2 = "";
        document.write(!!str1+"<br>");
        document.write(!!str2+"<br>");
        document.write("<hr>");

        //null & undefined
        var obj = null;
        var obj1;
        document.write(!!obj+"<br>");
        document.write(!!obj1+"<br>");

        var date = new Date();
        document.write(!!date+"<br>");
        document.write("<hr>");

        var obj3 = new Date();
        
        if (obj3 != null){
            alert(123);
        }
        //js中可以這樣定義，簡化書寫    物件和陣列都可這樣
        if (obj3){
            alert(234);
        }
    </script>
</head>
<body>

</body>
</html>

三元運算子

? :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三元運算子</title>
    <script>
        /*
            語法：
                表示式?值1:值2；
         */
        var a = 3;
        var b = 4;
        var c = a > b? "a大" : "b大";
        document.write(c);
    </script>
</head>
<body>

</body>
</html>

流程控制語句
1. if...else...
2. switch:
  
  在java中，switch語句可以接受的資料型別：byte int shor char 列舉（1.5） String（1.7）
  
  switch（變數）：
  
  case 值：
  
  在JS中，switch語句可以接受任意的原始資料型別
3. while
4. do...while
5. for

JS特殊語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊語法</title>
    <script>
        //1.語句以 ; 結尾，如果一行只有一條語句則 ; 可以省略（不建議省略）
        var a = 3
        /*
               2.變數的定義使用var關鍵字，也可以不使用
                    用：定義的變數是區域性變數
                    不用：定義的變數是全域性變數   (不建議使用)
         */
      /*  b = 4;
        alert(b);*/
        /*function fun() {
            b = 4;
        }
        fun();
        alert(b);*/

    </script>
</head>
<body>

</body>
</html>

練習：99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table align:center>");
        for (var i = 1;i<=9;i++){
            document.write("<tr>");
            for (var y = 1; y<=i ; y++){
                document.write("<td>");
                document.write(i +"&nbsp;"+ "*" + "&nbsp;" + y +"&nbsp;"+"="+"&nbsp;"+(i*y));
                document.write("</td>");
            }
            document.write("</tr>");
        }
    </script>
</head>
<body>

</body>
</html>

基本物件：

Function物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function物件</title>
    <script>
        /*
            Function:函式（方法）物件
            1.建立：
                1.var fun = new Function(形式引數列表，方法體);//不建議使用，知道即可
                2.function 方法名稱（形式引數列表）{
                        方法體；
                    }
                3.var 方法名 = function(形式引數列表){
                        方法體
                }
            2.方法：

            3.屬性：

            4.特點：
                1.方法定義時，形參的型別不用寫
                2.方法是一個物件，如果定義名稱相同的方法，會覆蓋
                3.在JS中，方法的呼叫只與方法的名稱有關，和引數列表無關
                4.在方法宣告中，有一個隱藏的內建物件（陣列），arguments，封裝了所有的實際引數
            5.呼叫：
                方法名稱（實際引數列表）；
         */
        //1.建立方式1
        var fun1 = new Function("a","b","alert(a);");
        //呼叫方法
        //fun1(5,4);
        //alert(fun1.length);

        //2. 建立方式2
        function fun2(a,b) {
            alert(a+b);
        }
        //fun2(4,6);
        //alert(fun2.length);

        //3.建立方式3
        var fun3 = function (a,b) {
            alert(a+b);
        }
        //fun3(4,5);
        //alert(fun3.length);

        function fun4(a,b) {
            alert(a);
            alert(b);
        }
        //fun4(2,3);
        //fun4(4);
        //fun4();
        //fun4(4,5,7);

        /*
            求兩個數的和
         */
        /*function add(a,b) {
            return a+b;
        }*/
        //求任意個數的和
        function add() {
            var sum = 0;
            for (var i = 0;i<arguments.length;i++){
                sum += arguments[i];
            }
            return sum;
        }
        //var sum = add(1,2);
        alert(add(1,2,3,4,5,6,7,8,9,10));
        //alert(sum);
    </script>
</head>
<body>
</body>
</html>

Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array物件</title>
    <script>
        /*
            Array:陣列物件
                1.建立：
                    1. var arr = new Array(元素列表);
                    2. var arr = new Array(預設長度);
                    3. var arr = [元素列表];
                2.方法：
                    join(引數)：將陣列中的元素按照指定的分隔符拼接為字串
                    push() 向陣列的末尾新增一個或更多的元素，並返回新的長度。
                    concat():連線兩個或更多的陣列，並返回結果
                    pop():刪除並返回陣列的最後一個元素
                    reverse():顛倒陣列中元素的順序
                    shift():刪除並返回陣列的第一個元素
                    slice() : 從某個已有的陣列返回選定的元素
                    sort():對陣列中的元素進行排序
                    splice():刪除元素，並向陣列新增新元素
                    toSource():返回該物件的原始碼
                    toString()：把陣列轉換為字串，並返回結果
                    toLocaleString():把陣列轉換為本地陣列，並返回結果
                    unshift():向陣列的開頭新增一個或更多元素，並趕回新的長度
                    valueOf()：返回陣列物件的初始值

                3.屬性：
                    length：陣列的長度
                4.特點：
                    1.JS中，陣列中元素的型別是可變的。
                    2.JS中，陣列的長度是可變的
         */
        //1.建立方式
        /*ar arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4,5];
        var arr4 = new Array();

        document.write(arr1 + "<br>");
        document.write(arr2 + "<br>");
        document.write(arr3 + "<br>");
        document.write(arr4 + "<br>");*/

        var arr = [1,"abc",true];
        document.write(arr + "<br>");

        document.write(arr[0] + "<br>");
        document.write(arr[1] + "<br>");
        document.write(arr[2] + "<br>");
        document.write(arr[3] + "<br>");
        arr[10] = "langlang";
        document.write(arr[10]+"<br>");
        document.write(arr[8]+"<br>");
        document.write(arr.length+"<br>");//11
        document.write(arr.join("-")+"<br>");
        arr.push("測試");
        //arr.reverse();
        document.write(arr.join("-")+"<br>");

    </script>
</head>
<body>

</body>
</html>

Boolean

Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date物件</title>
    <script>
        /*
            Date:日期物件
                1.建立：
                    var date = new Date();
                2.方法：
                    toLocaleString():返回當前date物件對應的時間本地字串格式
                    getTime():獲取毫秒值。返回當前日期物件描述的時間和1970年1月1日零點的毫秒值差
         */
        var date = new Date();
        document.write(date + "<br>");//Mon Sep 14 2020 15:50:17 GMT+0800 (中國標準時間)

        document.write(date.toLocaleString()+"<br>");//2020/9/14 下午3:50:17

        document.write(date.getTime()+ "<br>");//1600069912334
    </script>
</head>
<body>

</body>
</html>

Math

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math物件</title>
    <script>
        /*
            Math:
                1.建立：
                    * 特點：Math物件不用建立，直接使用。Math.方法名()
                2.方法：
                    random():返回0-1之間的隨機數    [0,1)
                    ceil(x):對數進行上舍入
                    floor(x):對數進行下舍入
                    round():把數四捨五入為最接近的整數
                3.屬性：
                    PI

         */
        document.write(Math.PI+"<br>");
        document.write(Math.random()+"<br>");
        document.write(Math.ceil(3.14)+"<br>");//4
        document.write(Math.floor(3.14)+"<br>");//3
        document.write(Math.round(3.49)+"<br>");//3
        document.write(Math.round(3.50)+"<br>");//4
    </script>
</head>
<body>

</body>
</html>

Number

String

RegExp:正則表示式物件

正則表示式：定義字串的組成規則
1. 單個字元：[]
  
  如：[a] [ab] [z-zA-Z0-9_]
  
  特殊符號代表特殊含義的單個字元：
  
  \d:單個數字字元 [0-9]
  
  \w:單個單詞字元[z-zA-Z0-9_]
2. 量詞符號
  
  * 表示出現0次或1次
  
  ？表示出現0次或1次
  
  (正號)+ 出現1次或多次
  
  {m,n}:表示 m <= 數量 <= n
  
  m如果預設：{,n}:最多n次
  
  n如果預設：{m,} 最少m次
3. 開始結束符號
  
  ^:開始
  
  $:結束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp物件</title>
    <script>
            /*
                正則物件：
                    1.建立：
                        1.var reg = new RegExp("正則表示式");
                        2. var reg = /正則表示式/;
                    2.方法
                        test(引數):驗證指定的字串是否符合正則表示式的規範

             */
        //1.
        var reg = new RegExp("^\\w{6,12}$");
        //2.
        var reg2 = /^\w{6,12}$/;

        /*alert(reg);
        alert(reg2);*/

        var username = "zhangsan";

        //驗證
        var flag = reg.test(username);
        alert(flag);

    </script>
</head>
<body>

</body>
</html>

Global

1. 特點：全域性物件，這個Global中封裝的方法不需要物件就可以直接呼叫。方法名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global物件</title>
    <script>
        /*
            Global
                1.特點：全域性物件，這個Global中封裝的方法不需要物件就可以直接呼叫。方法名()
                2.方法：
                    encodeURI():url編碼
                    decodeURI:url解碼

                    encodeURIComponent():url編碼  編碼的字元更多
                    decodeURIComponent():url解碼

                    parseInt():將字串轉為數字
                        逐一判斷每一個字元是否是數字，直到不是數字為止，將前邊數字部分轉為number

                    isNaN():判斷一個值是否是NaN
                         NaN六親不認，連自己都不認識。NaN參與的== 的比較全部為false

                    eval():將 JavaScript 字串，並把它作為指令碼程式碼執行
                3.URL編碼
                   我是浪浪呀 = %E6%88%91%E6%98%AF%E6%B5%AA%E6%B5%AA%E5%91%80
         */
        var str = "http://www.baidu.com?wd=我是浪浪呀";
        var encode = encodeURI(str);
        document.write(encode+"<br>");//%E6%88%91%E6%98%AF%E6%B5%AA%E6%B5%AA%E5%91%80
        var s = decodeURI(encode);
        document.write(s+"<br>");

        var str1 = "http://www.baidu.com?wd=我是浪浪呀";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1+"<br>");//%E6%88%91%E6%98%AF%E6%B5%AA%E6%B5%AA%E5%91%80
        var s1 = decodeURIComponent(encode1);
        document.write(s1+"<br>");

        var str2 = "a123abc";
        var number = parseInt(str2);
        alert(number + 1);

        var aa = NaN;
        document.write(aa == NaN+"<br>");//false
        document.write(isNaN(aa)+"<br>");//true

        var jscode = "alert(123)";
        eval(jscode);

    </script>
</head>
<body>

</body>
</html>

DOM

DOM簡單學習：

功能：控制html文件的內容
程式碼：獲取頁面標籤（元素）物件 Element
- document.getElementById("id值")：通過元素的id獲取元素物件
操作Element物件：
1. 設定屬性值
  1. 明確獲取的物件是哪一個？
  2. 檢視API文件，找其中有哪些屬性可以設定
2. 修改標籤體內容：
  - 屬性：innerHTML
  1. 獲取元素物件
  2. 使用innerHTML屬性修改標籤體內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM——獲取元素物件</title>

</head>
<body>
    <img id="light" src="img/cropped-1920-1080-1062189.jpg">
    <h1 id="title">悔創阿里傑克馬</h1>
    <script>
        //通過id獲取元素物件
        var light = document.getElementById("light");
        alert("我要換圖片了。。。");
        light.src = "img/s1.jpg";

        //1.獲取h1標籤物件
        var title = document.getElementById("title");
        alert("我要換內容了");
        //2.修改內容
        title.innerHTML = "不識妻美劉強東";
    </script>
</body>
</html>

事件簡單學習

功能：某些元件被執行了某些操作後，觸發某些程式碼的執行。
如何去繫結事件
1. 直接在HTML標籤上，指定事件的屬性，屬性值就是js程式碼
  1. 事件：onclick---->點選事件
  2. 通過js獲取元素物件，指定事件屬性，設定一個函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件繫結</title>

</head>
<body>
<img id="light" src="img/cropped-1920-1080-1062189.jpg" onclick="fun();">
<img src="img/s1.jpg" id="light2">
<script>
    function fun() {
        alert("我被點了！");

    }

    function fun2() {
        alert("咋老是點我！");
    }
    //1.獲取light物件
    var light2 = document.getElementById("light2");
    //2.繫結事件
    light2.onclick = fun2;
</script>
</body>
</html>

案例：點選圖片自動切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片切換</title>
</head>
<body>
    <img id="light" src="img/s1.jpg">
<script>
    /*
        分析：
            1.獲取圖片物件
            2.繫結單擊事件
            3.每次點選切換圖片
                規則：如果是圖片是圖1，切換為圖2
                     如果圖片是圖二，切換為圖1
                使用標記flag來完成
     */
    //1.獲取圖片物件
    var light = document.getElementById("light");

    var flag= false;//代表是圖1

    light.onclick = function () {
        if (flag){
            light.src = "img/s1.jpg";
            flag = false;
        }else {
            light.src = "img\\cropped-1920-1080-1062189.jpg";
            flag = true;
        }

    }
</script>
</body>
</html>

BOM

概念：Browser Object Model 瀏覽器物件模型
- 將瀏覽器的各個組成部分封裝成物件。

組成：
1. Window：視窗物件
2. Navigator：瀏覽器物件
3. Screen：顯示器螢幕物件
4. History:歷史記錄物件
5. Location：位址列物件

Window：視窗物件

彈出框有關的方法：
- alert() 警告框
- confirm() 確認框
- prompt() 輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window物件</title>
    <script>
        /*
            Window:視窗物件
                1.建立
                2.方法
                    1.與彈出框有關的方法：
                        alert() 顯示帶有一段訊息和一個確認按鈕的警告框
                        confirm()   顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊
                            如果使用者點選確認按鈕，則方法返回true
                            如果使用者點選取消按鈕，則方法返回false

                        prompt()    顯示可提示使用者輸入的對話方塊
                            返回值。獲取使用者輸入的值
                3.屬性
                4.特點
                    Window物件不需要建立可以直接使用     window使用    window.方法名();
                    window引用可以省略。   方法名();
         */
        alert("hello window");
        window.alert("hello w");
        var t = confirm("確認退出嗎？");
        if(t){
            //退出操作
            alert("歡迎再次光臨！");
        }else {
            //提示：
            alert("手別抖。。");
        }

        //輸入框
        var result = prompt("請輸入使用者名稱:");
        alert(result);
    </script>
</head>
<body>

</body>
</html>

與開啟關閉有關的方法
- close() 關閉瀏覽器視窗。誰呼叫，關閉誰
- open() 開啟一個新的瀏覽器視窗返回新是window物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window物件</title>

</head>
<body>
    <input type="button" value="開啟視窗" id="openBtn">
    <input type="button" value="關閉視窗" id="closeBtn">
    <script>
        /*
            Window:視窗物件
                1.建立
                2.方法
                      與開啟關閉有關的方法:
                      close()   關閉瀏覽器視窗。
                            誰呼叫我 我關誰
                      open()    開啟一個新的瀏覽器視窗
                            返回新的Window物件
                3.屬性
                4.特點
                    Window物件不需要建立可以直接使用     window使用    window.方法名();
                    window引用可以省略。   方法名();
         */

        //開啟一個新視窗
        var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function () {
            //開啟新視窗
            newWindow = open("http://www.baidu.com");
        }

        //關閉開啟的新視窗
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function () {
            //關閉開啟的新視窗
            newWindow.close();
        }

    </script>
</body>
</html>

與定時器有關的方法
- setTimeout() 一次性定時器
- clearTimeout() 關閉一次性定時器
- setInterval() 迴圈定時器
- clearInterval() 關閉迴圈定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window物件</title>

</head>
<body>
    <script>
        /*
            Window:視窗物件
                1.建立
                2.方法
                     與定時器有關的方法：
                     setTimeout():  在指定的毫秒數後呼叫函式或計算表示式
                            引數：
                                1.js程式碼或者方法物件
                                2.毫秒值
                            返回值；唯一標識，用於取消定時器
                     clearTimeout() 取消由setTimeout() 方法設定的timeout

                     setInterval()  按照指定的週期（以毫秒計） 來呼叫函式或計算表示式
                     clearInterval() 取消由setInterval()方法設定的迴圈定時器
                3.屬性
                4.特點
                    Window物件不需要建立可以直接使用     window使用    window.方法名();
                    window引用可以省略。   方法名();
         */

        //一次性定時器
        var id = setTimeout(fun,3000);
        clearTimeout(id);
        function fun() {
            alert("boom~~~");
        }

        //迴圈定時器
        var id1 = setInterval(fun,2000);
        clearInterval(id1);
    </script>
</body>
</html>

Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4【一】

前段時間因為參與專案涉密，所以一直沒有更新部落格，有些博友給我私信或者留言要部分博文的原始碼，因為我的電腦更換，demo的原始碼沒有備份所以無法提供。大家可針對具體問題問我，有空我定會回覆的。另外轉發文章

D3製作力導向圖

<html> <head> <meta charset=\"utf-8\"> <title>Force</title> <style>

d3.js製作連線動畫圖和編輯器

本專案使用主要d3.jsv4製作，分兩部分，一個是實際展示的連線動畫圖，另一個是管理人員使用滑鼠編輯連線的頁面。對於d3.js如何引入圖片，如何畫線等基礎功能，這裡就不再介紹了，大家可以找一些入門文章看一下。

vue + d3.js 繪製柱狀圖/條形圖

技術標籤：d3.jsVue 安裝d3 npm install d3 .vue檔案中 <template> <div></div> </template>

原創 - react + d3.js + TS 堆疊條形圖報錯解決

react + d3.js + TS 堆疊條形圖報錯解決 1.結構結構請看之前的文章，這裡記錄部分報錯解決的方式。能力受限無法解決方式不會優雅。

vue+element表格：當有多頁資料時，且尾頁只剩一條資料時，刪除尾頁的資料，頁面會置空

vue+element表格：當有多頁資料時，且尾頁只剩一條資料時，刪除尾頁的資料，頁面會置空。

徹底理解js中this的指向，不必硬背。【轉載】

徹底理解js中this的指向，不必硬背。首先必須要說的是，this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件（這句話有些問題，後面會解

教育專案--VUE進階【一】【14】

技術標籤：# 專案--線上教育 NPM工具 4.NPM工具1、簡介1、什麼是NPM2、NPM工具的安裝位置

vue + d3.js(v6) 繪製【餅圖】

技術標籤：d3.js <template> <div></div> </template> <script> import * as d3 from \'d3\';

vue使用svg檔案補充-svg放大縮小操作(使用d3.js)

前言專案需求是要引入svg檔案，然後對裡面的元素進行賦值，完了之後還要能夠讓svg放大縮小，點選檢視全屏。針對上一篇文章，進行對svg檔案裡面的元素進行賦值和放大縮小的補充筆記

輪播圖js首先獲取要使用的元素，建立index是圖片的索引，num是小圓點的索引，先實現自動滾因為預設向右滾所以向右滾和自動滾一樣，通過建立計時器將封裝好的自動滾函式匯入，向左滾則與之相反讓index

輪播圖js首先獲取要使用的元素，建立index是圖片的索引，num是小圓點的索引，先實現自動滾因為預設向右滾所以向右滾和自動滾一樣，通過建立計時器將封裝好的自動滾函式匯入，向左滾則與之相反讓index--，滑

vue專案實現減少app.js和vender.js的體積操作

配置webpack中externals來減少打包後vendor.js的體積在日常的專案開發中，我們會用到各種第三方庫來提高效率，但隨之帶來的問題就是打包後的vendor.js體積過大，導致載入時空白頁時間過長，給使用者的體驗太差。為此

vue使jsZip和FileSaver.js打包下載

安裝 npm install jszip npm install file-saver --save 在元件中 import JSZip from \'jszip\' import FileSaver from \"file-saver\"

Vue 整合 PDF.js 實現 PDF 預覽和新增水印的步驟

實現效果可用外掛介紹 Mozilla 提供了 PDF.js 和pdfjs-dist ，兩者的區別如下： PDF.js ，一個完整的 PDF 檢視器，可以直接使用其提供的 viewer.html 檢視 PDF 內容，包含完整樣式和相關功能。優點是快速整合，不

d3.js學習筆記（三）------散點圖（添加了數軸）

技術標籤：D3.js資料視覺化d3.js 添加了數軸的散點圖要點： 1、定義數軸時是用 d3.axisBottom()、 d3.axisLeft() 2、數軸是要基於比例尺工作，所以必須呼叫 .scale(比例尺) 3、ticks() 是用來定義刻度線的數量，

d3.js學習筆記（二）------散點圖的顯示（比例尺）

技術標籤：D3.jsd3.js資料視覺化 d3.js之散點圖步驟： 1、建立 svg 2、在 svg 中建立資料點 circle 3、用比例尺設定資料點的引數，（注意：給比例尺的範圍要新增邊距，不然有些點會溢位，無法完整顯示） 4、新增

JS實現輪播圖效果

本文例項為大家分享了JS實現輪播圖展示的具體程式碼，供大家參考，具體內容如下

js實現輪播圖效果 z-index實現輪播圖

本文例項為大家分享了js實現輪播圖效果的具體程式碼，供大家參考，具體內容如下

D3.js 實現帶伸縮時間軸拓撲圖的示例程式碼

效果圖: 基於d3-v5,依賴dagre-d3,直接上程式碼: <!DOCTYPE html> <html lang=\"en\">

【原理】元資料管理原理和圖資料庫應用

一、背景大資料挑戰大資料時代，餓了麼面臨資料管理、資料使用、資料問題等多重挑戰。具體可以參考下圖：

Vue和d3.js(v4)力導向圖force結合使用，v3版本升級v4【一】

JavaScript

1.概念：一門客戶端指令碼語言

2.功能：

3.JavaScript發展史：

學習過程：

ECMAScript：客戶端指令碼語言的標準

DOM

DOM簡單學習：

事件簡單學習

案例：點選圖片自動切換

BOM

Window：視窗物件

相關推薦