数据可视化 D3.js 与JavaScript对比

最新推荐文章于 2022-11-26 18:25:43 发布

isOllie

最新推荐文章于 2022-11-26 18:25:43 发布

阅读量990

点赞数 1

分类专栏： D3.js 文章标签： D3 javascript

本文链接：https://blog.csdn.net/qq_39141486/article/details/102764943

版权

D3.js 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

使用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>

isOllie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化 D3.js 与JavaScript对比

使用JavaScript来更改Html// 使用JavaScript var paragraphs = document.getElementsByTagName("p"); for (let i = 0; i < paragraphs.length; i++) { var paragraph = paragraphs.item(i)...
复制链接

扫一扫