大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
JavaScript d3使用指南
1. 如何在项目中使用d3:
- 如果是要在网站上使用d3效果的话，那么可以直接在script中引用官方直接给的网络库
<script src="https://d3js.org/d3.v5.js"></script>
- 如果要在本地运行或者调试，亦或者自己搭建服务器，可以直接下载到本地进行使用。
<script> src="path/...../d3.js"</script>
(这个script可以单独成行)
官网:https://d3js.org/
2. d3基本思想
d3是基于选择数据和绑定数据进行工作的。
<body>
<p></p>
<p></p>
<script src="https://d3js.org/d3.v5.js"></script>
<script> let p = d3.select('body') .selectAll("p"); p.text("伊雷娜和沙耶贴贴~~~") </script>
</body>
解释一下代码:
-
我们声明了一个对象 p 并通过 d3.select这个方法让它选择了html中的body,然后通过selectAll选择了body中的所有’p’标签。
-
之后对p的操作就相当于对body中所有的p标签进行操作了
-
然后我们通过text方法向p,即所有的p标签中加入了文字。
(伊雷娜和沙耶快结婚！！！)
可以自己在html中试一试这一段代码(仔细看，我是直接引用了网络上的d3库，所以在网上都可以正常运行)
3. 选定元素与绑定数据
1.选择元素
d3中有两个选择元素的函数:
- select (选择第一个符合的)
- selectAll (选择所有符合的)
比如:
var body = d3.select("body"); //选择html文档中的body元素
var svg = body.select("svg"); //选择body中的svg元素,注意声明了body后，就可以把body当作一个新的d3对象使用(大概这个意思)
var p = body.selectAll("p"); //选择body中所有的p元素
var p1 = body.select("p"); //选择body中第一个p元素
2.绑定数据
d3提供一个把数据绑定在一个dom对象的函数(可以理解为赋值)。
- data() : 把一个数组绑定到一个选择的对象上，进行 一一对应。
- datum() : 把一个数据绑定到 所有选择集 上。
示例:
<body>
<p>刻晴</p>
<p>甘雨</p>
<p>优菈</p>
<script src="https://d3js.org/d3.v5.js"></script>
<script> var str = '个老婆'; var p = d3.select("body") .selectAll("p"); p.datum(str) .text(function (d, i) {
return "这是我" + (i+1) + d; }) </script>
</body>
说明:
- 将str与p中所有的数据绑定
2.通过无名函数function进行访问,其中i代表索引编号,而d代表绑定的数据。
<body>
<p></p>
<p></p>
<p></p>
<script src="https://d3js.org/d3.v5.js"></script>
<script> var dataset = ['甘雨', '刻晴', '优菈']; var p = d3.select("body") .selectAll("p"); p.data(dataset) .text(function (d, i) {
return d + "是我老婆"; }) </script>
</body>
说明:
-
把dataset中的第i个数据与p中第i个对象绑定
-
利用无名函数访问
一些说明:
假如使用data,然而dataset中与绑定的对象数目不同,那么该怎么办的？
d3中就提供了3个函数来解决这个问题:
- 假如数据比对象多,那么d3就会自动创建对象与多余的数据绑定:
- enter: 自动创建的对象与数据绑定的部分被成为”enter”
- update: 原本的的对象与数据绑定的部分被称为”update”
- 假如对象比数据多,那么d3就会自动创建对象与多余的数据绑定:
exit: 没有数据绑定的部分被称为”exit”
<body>
<p>优菈</p>
<p>刻晴</p>
<p>胡桃</p>
<script> var dataset = ['甘雨','诺艾尔','砂糖','芭芭拉','莫娜']; var p = d3.select("body") .selectAll("p"); var update = p.data(dataset) var enter = update.enter(); update.text(function(d,i){
return "我的第" + i + "个老婆:" + d; }) var pEnter = enter.append("p") pEnter.text(function(d,i){
return "我的第" + i + "个老婆:" + d; }) </script>
</body>
4. 选择，插入， 删除元素
选择
- 我们知道,在用d3操作对象的时候，对象是可以通过编号索引的，所以可以通过对编号的引用来操作
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script> var dataset = ['甘雨','诺艾尔','砂糖','芭芭拉','莫娜']; var p = d3.select("body") .selectAll("p"); var update = p.data(dataset) var enter = update.enter(); update.text(function(d,i){
if(i == 2) d3.select(this).style("color", "blue"); return "我的第" + i + "个老婆:" + d; }) </script>
</body>
- 通过class来选择
<body>
<p></p>
<p class = "myP"></p>
<p></p>
<p></p>
<p></p>
<script> var dataset = ['甘雨','诺艾尔','砂糖','芭芭拉','莫娜']; var p = d3.select("body") .selectAll("p"); var update = p.data(dataset) var enter = update.enter(); update.text(function(d,i){
return "我的第" + i + "个老婆:" + d; }) var d = d3.select("body") .selecAll(".myP"); d.style("style", "blue") </script>
</body>
如果是class定义的话，在名称前加’.’,如果是通过id定义的话，前面加’#’。
插入元素
d3提供了两种插入函数:
- append() : 在选择集尾部插入元素
- insert() : 在选择集头部插入元素
<body>
<p>甘雨</p>
<p id="myP">诺艾尔</p>
<p>砂糖</p>
<p>芭芭拉</p>
<p>莫娜</p>
<script> var d = d3.select("body") .append("p") .text("优菈！！") .style("color", "blue"); </script>
</body>
删除元素
删除很简单，直接使用remove即可
var p = d3.select("body")
.select("#myP")
.remove();
这样就直接删除了id为’myP’的对象。
制作简单的图表
首先我们需要明确一下制作图标的思路:
- 生成svg画布
- 使用d3中的rect元素对svg进行赋值，即各类参数
- 在完成赋值之前，需要我们自己去设计数据，让d3进行数据转化，从而赋值给svg。
那么我们的具体步骤就是:
- 设定数据
var marge = {top: 60, bottom: 60, left: 60, right:60};
var dataset = [233, 466 , 699];
- 生成svg画布,并生成操作对象
var svg = d3.select("svg");//得到svg画布
var g = svg.append("g")//生成一个对象来装这个svg
.attr("transform","translate("+marge.top+","+marge.left+")");//此处使用的是字符拼接
- 画出矩阵
在html的坐标中,(0, 0)点位于左上角，水平向右为x坐标，垂直向下为y坐标
由于画出向上延伸的图标比较困难,那么这里就按照向上画的举出例子。
<body>
<svg></svg>
<script> var margin = {
top: 80, bottom: 60, left: 70, right: 60};//用于设定表格的位置 var dataset = []; for(var i = 0; i < 20; ++i) dataset[i] = Math.random() * 600; var svg = d3.select("svg") .attr("width", window.innerWidth) .attr("height", window.innerHeight); //↑将svg画布充满整个屏幕，当然也可自行调整，注意：如果svg过小，可能里面的内容显示不全，所以需要注意 var g = svg.append("g")//可以理解为把svg与g绑定在一起 .attr("transform", "translate(" + margin.top + "," + margin.left + ")");//设定左上角位置 var height = 0.8 * window.innerHeight, width = 0.8 * window.innerWidth; var rectWidth = width / dataset.length; //每个柱子的宽度 g.selectAll("rect") .data(dataset)//选中所有的rect对象进行操作 .enter()//由于都是新生成的，所以当然要用enter()了,这是上一节内容。 .append("rect")//自动补充rect对象与数据进行绑定 .attr("x", function (d, i) {
return i * rectWidth; }) .attr("y", function (d, i){
//由于高度是从上往下延伸的，所以柱子y轴开始的地方应该是它的顶端 return height - d; }) .attr("width", rectWidth * 0.9) .attr("height", function (d) {
return d; }) .attr("fill", "blue");//颜色 </script>
</body>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/209838.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
