D3基础

2023-11-26 in Tools

Contents

基于前端作图的尝试

D3

D3.js是一个JavaScript库，它能够提供非常底层的绘图细节，这意味着高自定义度的同时也会很麻烦，平时极少需要这样，就当学习JavaScript了吧

和许多js库一样，都在html文件的head部分导入：

<head>
    <meta charset="utf-8" />
    <title>D3 Page Template</title>
    <script type="text/javascript" src="d3/d3.v7.js"></script>	
		</style>
  </head>

这里的src是本地的js文件，也可以用网站的

d3.js和d3.min.js的区别在于d3.min.js去除了空格，没法阅读但是加载起来更快

在正文中使用d3对象的select方法

典型的例子是：

d3.select("body")
          .selectAll("div")
          .data(dataset)
          .enter()
          .append("div")
          .attr("class", "bar")
          .style("height", function(d){
            return d*5 + "px";
          })

这里面有一些基础的js知识，我在这里不多讲，它们本来也跟d3没有关系

基本上d3就是在调用各种方法，而这些方法的返回都会是html对象的引用

var svg = d3.select("body").append("svg");

这样就后面可以单独使用了

于是乎后面就是要重点讲这些方法

select
selectAll 对于还未创建的对象，返回空（D3的特点就是要先选择将要操作的对象，再创建
data遍历传入数组，每个元素相当于一个子对象
enter 为每个子对象创建占位符
append添加html元素
attr设置属性

function的参数输入依次是：元素、下标

感觉其实使用上并不难理解，主要还是API太多了，这其实也是前端这行的特点，太多功能了

现在有了GPT相信应该不难