d3入门笔记

最新推荐文章于 2023-09-12 15:53:35 发布

「已注销」

最新推荐文章于 2023-09-12 15:53:35 发布

阅读量392

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/oonelost/article/details/105066766

版权

本文是一篇关于D3.js的入门教程，涵盖了从导入库到创建动态图表的全过程。讲解了如何使用d3.select和d3.selectAll选择元素，数据绑定，SVG和Canvas的区别，比例尺和坐标轴的运用，以及如何绘制包括饼状图、力导向图在内的各种图表。还涉及到了交互式操作和地图制作的基础知识。

摘要由CSDN通过智能技术生成

文章目录

导入d3库

-导入外部d3库

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

导入本地d3库

<script src="d3.min.js"></script>

标签选择

d3.select()：是选择所有指定元素的第一个
d3.selectAll()：是选择指定元素的全部

var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p");      //选择body中的第一个p元素
var p = body.selectAll("p");    //选择body中的所有p元素

绑定数据

无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用，d为绑定的数据，i为索引,索引号由0开始

p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});

datum()：绑定一个数据到选择集上p.datum(str);

var str = "绑定一个数据";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});
//修改段落的颜色和字体大小
p.style("color","blue")
p.style("font-size","66px");

在这里插入图片描述

data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

var dataset = ["这里是数据1","这里是数据2"];
var body = d3.select("body");
var p = body.selectAll("p");

p.data(dataset)
    .text(function(d, i){
        return d;
    });
//修改段落的颜色和字体大小
p.style("color","blue")
p.style("font-size","66px");

在这里插入图片描述

选择插入删除元素

选择元素：通过id选择符#或者class选择符.选择某一个标签

<p class="my_1">class选择符变为红色</p>
<p id="my_2">id选择符变为蓝色</p>

var body = d3.select("body");
var p1 = body.selectAll(".my_1");
p1.style("color","red");
var p2 = body.select("#my_2");
p2.style("color","blue");

在这里插入图片描述

append():末尾添加

var body = d3.select("body");
body.append("p").text("使用append在末尾添加一行");

在这里插入图片描述

insert()：中间插入

var body = d3.select("body");
body.insert("p",".my_id").text("利用insert函数插入");

remove()：删除指定元素

var body = d3.select("body");
var p = body.select("#myid");
p.remove();

绘制简单图表

SVG：可缩放矢量图形（Scalable Vector Graphics），绘制的是矢量图，放大不失真，不适合做游戏
Canvas：绘制的是位图，图像放大后会失真。适合做游戏
利用SVG绘制一个简单图表：在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制一个简单图表</title>
    <script src="d3.min.js"></script>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

index.js:

var dataset = [250, 210, 170, 130, 90];  //数据（表示矩形的宽度）
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
var width = 300;  //画布的宽度
var height = 300;   //画布的高度

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素
    //矩形rect的属性：
    // 矩形左上角的 x 坐标    矩形左上角的 y 坐标
    // width：矩形的宽度	    height：矩形的高度
    .attr("x", 20)
    .attr("y", function (d, i) {
        return i * rectHeight;
    })
    .attr("width", function (d) {
        return d;
    })
    .attr("height", rectHeight - 2)
    .attr("fill", "steelblue"); //设置矩形填充颜色

在这里插入图片描述