d3.js html()用法及代碼示例

d3.js中的d3.html()函數用於獲取和讀取HTML類型的文件。它首先以文本形式獲取文件，然後將其解析為HTML。

用法:

d3.html(input[, init]);

參數：此函數接受上述和以下描述的兩個參數：

input:此參數是輸入文件的地址。
init:該參數具有函數。

注意：在進行以下給出的示例之前，請創建一個名為sample.html的文件。

範例1： 文件名：sample.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width,  
        initial-scale=1.0"> 
</head> 
  
<body> 
    <p>I am a p tag</p> 
    <script> 
        alert("This is from d3.html() function") 
    </script> 
</body> 
  
</html>

文件名：index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"/> 
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        d3.html("sample.html", function (d) { 
            console.log(d); 
        }); 
    </script> 
</body> 
  
</html>

輸出：

範例2： 文件名：sample.html

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, 
         initial-scale=1.0"> 
    <title>Document</title> 
</head> 
<body> 
    <h3>D3.js | d3.html() Function</h3> 
    <p>I am a p tag</p> 
</body> 
</html>

文件名：index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" path1tent= 
        "width=device-width,initial-scale=1.0"/> 
</head> 
  
<body> 
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script> 
        d3.html("sample.html", function (d) { 
            d = [].map.call(d.querySelectorAll("p"), (p) => { 
                var h3 = d.querySelector("h3"); 
                document.write(`<h3>${h3.textContent}</h3>`); 
                document.write(`<p>${p.textContent}</p>`); 
            }) 
        }); 
    </script> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js html() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。