D3 项目构建

2022-04-21
d3 v3 javascript 数据可视化

当了解上述D3介绍之后，我们可以通过引入 d3.js来直接帮助我们支持d3.js语法，首先我们可以通过使用min.js版本即官方所提供的在线引入方式，如：

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

通过使用d3.js所提供的本地js文件中，通常会有两种js，分别为.js以及min.js，一种是在开发环境中进行使用的，而min.js则是在项目发布的时候直接进行使用，两者实现了同样的功能，但唯一不同的是min.js将所有空格都合并了，而.js的code则符合js的代码格式规范，当引入之后我们可以通过绘制一个svg来证明d3.js是否引入成功:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>D3.js</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <circle></circle>
        <script>
            var width = 200;
            var height = 200;
            var svg = d3.select("body")
                .append("svg")
                .attr("width",width)
                .attr("height",height);
            svg.append("circle")
                .attr("cx","50px")
                .attr("cy","50px")
                .attr("r","50px")
                .attr("fill","blue");
        </script>
    </body>
</html>

⬅️ Go back