D3学习笔记

最新推荐文章于 2024-03-27 20:00:41 发布

J2虾虾

最新推荐文章于 2024-03-27 20:00:41 发布

阅读量342

点赞数

分类专栏： WEB编程

本文链接：https://blog.csdn.net/tntxia/article/details/94859358

版权

WEB编程专栏收录该内容

115 篇文章 0 订阅

订阅专栏

D3简介：

D3是一个用数据来操作Dom的Javascript框架，D3让你可以用HTML，SVG和CSS给你的数据带来生命。D3关注于如果基于标准来使用现在浏览器的功能，而不是把你绑定成专用的框架上，同时D3也提供了强大的Web可视化组件和数据驱动的方式去操纵数据。

D3框架的下载地址：https://github.com/d3/d3/releases/download/v5.9.7/d3.zip

D3框架源码的地址：https://github.com/d3/d3

D3框架源码下载的地址： https://github.com/d3/d3/zipball/master

你也可以直接引用官方的压缩版JS，如：

<script src="https://d3js.org/d3.v5.min.js"></script>

D3允许你绑定任意的数据到Dom上面，然后使用数据驱动的变化到文档里面，例如，你想要通过一个数据，使用D3生成一个HTML表格，同时你用相同的数据来生成一个SVG的图表。D3并不是一个提供庞大API的框架，D3目的是解决问题的关键：基于数据，有效率的操作文档，避免使用特殊的表达来使用HTML，SVG和CSS的功能，整个框架有很好的扩展性。由于间接的成本很小，D3的速度非常的快，同时D3支持大量的数据，动态显示，交互，还有动画效果。由于D3支持函数式的写法，你可以使用官方的格式，同时你允许使用社区提供的格式。

使用官方的API来改变文档经常是冗长，我们需要一些循环，保存一些临时变量来处理网页元素：

如下：

HTML文件：

<p>D3 is great!</p>
<p>D3 is simple!</p>
<p>D3 is amazing!</p>

Javascript代码：

    var paragraphs = document.getElementsByTagName("p");
    for (var i = 0; i < paragraphs.length; i++) {
        var paragraph = paragraphs.item(i);
        paragraph.style.setProperty("color", "blue", null);
    }

D3使用了声明式的方法来实现，Javascript代码可以写成：

d3.selectAll("p").style("color", "blue");

显然，用D3来操作方式要比原生的代码简洁得多。

当然你可以去改变单个节点的值，如：

d3.select("body").style("background-color", "black");

D3的Selections使用了W3C的Selector API，你可以用标签，ID和类作为选择器，

属性经常是动态计算的，数据一般会被分成一个数组来处理。

数组的第一个项都被作为函数的参数来处理，元素的下标和数据的下标是对应的。

如下：

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

Enter 和Exit

通过enter和exit方法，方便你增加节点，删除节点或者更新节点。

如下：

d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

到此，我们已经做一个小Demo，我们可以结合Jquery，做一个可以动态增加和删除文字块的小Demo了。

HTML代码：

<html>

<head>
    <meta charset="utf-8" />
    <script src="lib/d3/d3.js"></script>
    <script src="lib/jquery/jquery.js"></script>
    <script src="js/test.js"></script>
</head>

<body>
    <div>
        文字：
        <input name="text"> 字体大小：
        <select name="fontSize">
            <option>8px</option>
            <option>16px</option>
            <option>23px</option>
            <option>30px</option>
        </select>
        <button id="addBtn">增加</button>
        <button id="delBtn">删除</button>
    </div>
</body>

</html>

Javascript代码：

$(function() {

    let data = [];

    $("#addBtn").click(function() {
        let text = $("[name=text]").val();
        let fontSize = $("[name=fontSize]").val();
        data.push({
            text,
            fontSize
        });
        $("[name=text]").val("");
        $("[name=fontSize]").val("8px");
        draw();

    })

    $("#delBtn").click(function() {
        data.pop();
        draw();
    })

    function draw() {
        let p = d3.select("body")
            .selectAll("p")
            .data(data);
        p.enter().append("p")
            .text(function(d) { return d.text })
            .style("font-size", function(d) { return d.fontSize; })
        p.exit().remove();

    }

});

D3的动画

D3支持属性动画，通过插入值来实现动画效果，

如：

d3.select("body").transition().duration(2000)
            .style("background-color", "black");

这段代码让页面，2秒后，慢慢变成黑色。

下面的代码是在SVG上的动画效果：

HTML代码：

<html>

<head>
    <meta charset="utf-8" />
    <script src="lib/d3/d3.js"></script>
    <script src="lib/jquery/jquery.js"></script>
    <script src="js/test2.js"></script>
</head>

<body>
    <div>
        <svg width="500" height="500">
            <circle cx="100" cy="100"></circle>
            <circle cx="200" cy="100"></circle>
            <circle cx="300" cy="100"></circle>
        </svg>
    </div>
</body>

</html>

Javascript代码：

$(function() {
    let scale = 10;
    d3.selectAll("circle").data([1, 2, 3]);
    d3.selectAll("circle").transition()
        .duration(750)
        .delay(function(d, i) { return i * 10; })
        .attr("r", function(d) { return Math.sqrt(d * scale); });
})

执行后，可以看到3个小球慢慢变大了的动画效果。

J2虾虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3学习笔记

D3简介：D3是一个用数据来操作Dom的Javascript框架，D3让你可以用HTML，SVG和CSS给你的数据带来生命。D3关注于如果基于标准来使用现在浏览器的功能，而不是把你绑定成专用的框架上，同时D3也提供了强大的Web可视化组件和数据驱动的方式去操纵数据。D3框架的下载地址：https://github.com/d3/d3/releases/download/v5.9.7/d3....
复制链接

扫一扫

专栏目录