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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。