d3入门篇（一）：基础知识

xuweijian 发布于2019-08-23 13:59 / 1212人阅读

摘要：安装就是一个的库，不需要安装，可下载文件或直接引用网络链接。示例选择集，与原生中的用法类似，返回匹配的第一项，返回匹配的所有项。

安装

d3.js就是一个js的库，不需要安装，可下载文件或直接引用网络链接。

示例

first p

second p

third p

选择集

select()，selectAll() 与原生js中的querySelector querySelectorAll用法类似，select返回匹配的第一项，selectAll返回匹配的所有项。

选第一个元素

d3.select("body").select("p")

选指定的某个元素

d3.select("body").select(".secondElement") //class加. id加#

链式调用

var newP = d3.select("body").selectAll("p").text("在这里改变body内所有p标签的内容")；

改变样式与绑定数据

datum()

var p =d3.select("body").selectAll("p");

var str="123456";
p.datum(str);//绑定数据
p.text(function(d,i){
    return `第${i}个元素绑定的数据是${d}`;
})

data()

var p =d3.select("body").selectAll("p");
var arr=[1,2,3];
p.data(arr);
p.text(function(d,i){
return d;
})

function(d,i)

d:绑定的数据值
i:选择集元素的索引值从0开始

增删元素

append()//在选择集的末尾添加元素

d3.select("body").append("p").text("this is new append element")

insert(name,[before])//在指定元素之前添加元素

d3.select("body").insert("p", ".secondElement").text("this is new insert element");

remove()

var newElement=d3.select("body").insert("p", ".secondElement").text("this is new insert element");
newElement.remove();

云服务器 GPU云服务器入门篇基础篇之基础篇 ASPNET入门数据篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99908.html

d3入门篇（三）：比例尺坐标轴

摘要：为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的时候，我们希望图表显示范围都在画布里面，这时就会引入比例尺的概念来进行缩放。根据这些规则，会为我们返回一个比例尺函数。这篇文章继续介绍d3的基础知识比例尺在绘制柱状图时，我们往往会定义很大的画布，然而我们要可视化的数据确很小，这时会出现很多留白的情况。为了根据显示刻度灵活变化宽高，而不是定死，特别是数据差异性很大的...

tomato 2019-08-23 14:03 评论0 收藏0
d3入门篇（四）：绘制完整柱状图添加过渡效果

摘要：这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。这篇学习笔记是入门篇的最后一部分，将前几篇的内容整合到一起，绘制带过渡效果的柱状图，这次先给大家看一下结果图。结果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放结果图是想反馈一下在整合基...

Jason 2019-08-23 14:08 评论0 收藏0
前端综合性文档和教程总结（持续更新）

摘要：小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。小组中文文档，很全。小弟在前端摸爬滚打一段时间，发现前端的比较好的文档比较分散，特别是中文的，我平时都是ctrl+D收藏在浏览器里，以后有好的教程和综合性的文档我会更新到这里。一则可以做个记录，防止丢失。二则有需要的朋友可以来我这里找一找。 ...

piglei 2019-08-20 10:19 评论0 收藏0
d3入门篇（二）：绘制基本的柱形图

摘要：简单理解后的元素需要继续进行可视化的工作。当选择集中的元素个数大于数据集中的元素个数，通过处理之后返回多出来那部分数据的元素选择器这时候接着执行那就是在上了。简单理解后返回的是一个选择集，即多出来的那部分元素。 d3简单理解就是通过在svg画布上绘制基本图形，本文将介绍d3绘制基本的柱形图绘制画布 import * as d3 from d3; var width=300;//svg...

张率功 2019-08-23 14:00 评论0 收藏0
web入门+书籍推荐

摘要：这里我也给大家推荐一些数据可视化的图形库不过这些图形库一般需要一些的基础知识输入数据即可生成图形，自由发挥程度较低百度出品，与很像，个人觉得略丑推荐，但不适合新手，图表漂亮，灵活性高以上都可以先去阅读官方文档未完待续如果你想建立一个自己的网站，你可以从网上搜到许多的教程：比如 wordpress gitpages 等等。如果你想了解这个框架是怎么工作的，你可以了解以下下面的三个...

suosuopuo 2019-08-19 18:37 评论0 收藏0