数据可视化 D3 与JavaScript对比

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_39141486/article/details/102764943

使用JavaScript来更改Html

// 使用JavaScript
        var paragraphs = document.getElementsByTagName("p");
        for (let i = 0; i < paragraphs.length; i++) {
            var paragraph = paragraphs.item(i);
            paragraph.innerHTML="I like dogs"; 
        }

  使用Javascript来更改使用for循环遍历,但是对于字体的大小和颜色、样式更改就需要另外再写添加比如<style>样式来更改

使用 D3 来更改Html

//使用D3
        d3.select("body").selectAll("p").text("I Like Cat");
        

  而D3 是一个函数库可以链式编程,而且写法简便,一行调三个方法就可以将Html中标签的内容更改

  然后如果要添加其他的样式,比如说更改颜色字体什么的,一样是直接在后面调方法就可以,可以极大的减少修改的工作量


var p = d3.select("body").selectAll("p").text("www.Ares.com")
        p.style('color', 'red').style("font-size","72px");


代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The First</title>
</head>
<script src="../../../JS/d3.js"></script>
<body>
    <!-- D3是什么可以怎么用 -->
    <p>Hello World 1</p>
    <p>Hello World 1</p>
    <script>
        
        // // 使用JavaScript
        // var paragraphs = document.getElementsByTagName("p");
        // for (let i = 0; i < paragraphs.length; i++) {
        //     var paragraph = paragraphs.item(i);
        //     paragraph.innerHTML="I like dogs"; 
        // }
        
        //使用D3
        /**
         * D3是一个JavaScript的函数库
         * D3可以链式编程,主要是对函数的调用
        */
        d3.select("body").selectAll("p").text("I Like Cat");
        var p = d3.select("body").selectAll("p").text("www.Ares.com")
        p.style('color', 'red').style("font-size","72px");
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_39141486/article/details/102764943
今日推荐