1 Star 0 Fork 0

weblfg / D3数据可视化学习记录

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

D3 学习记录

  1. 在文档中添加文字 select()方法用来从文档中选择元素,通过append()方法添加元素,text()方法添加要渲染的文本数据
d3.select('body').append('a').text('hello wolrd d3 ')
//这里添加一个a标签到body中文本是hello world d3
  1. selectAll()方法选择一组元素
d3.select('ul').selectAll('li').text('hello')
  • d3是数据驱动的库
  1. 见的方法是在文档中为数据集中的每一个数据创建一个元素,为此,你可以使用 D3 的enter()方法。当enter()和data()方法一起使用时,它把从页面中选择的元素和数据集中的元素作比较。如果页面中选择的元素较少则创建缺少的元素。
const tmp = ["a", "b", "c"];
d3.select('ul').selectAll('li').data(tmp).enter().append('li').text('hello');
  1. text()方法是以字符串或者回调作为参数
d3.select('ul').selectAll('li').data(tmp).enter().append('li').text(d=>d+'usd')
  1. d3改变样式的方法是style(key,value)
  2. d3改变样式的方法style()第二个参数可以是回调可以根据参数返回不同的样式,也可以是字符串
d3.select('body').style('color','red')
d3.select('body').selectAll('h2').style('color',(d)=>{
    if(d<4){
        return 'green'
    }else{
        return 'red'
    }
})
  1. d3给元素添加样式的方法attr('class','className')
<style>
.liStyle{
    font-size:10px;
    color:red;
    font-weight:400;
}
</style>
<script>
    d3.select('body').selectAll('li').attr('class','liStyle')
</script>
  1. 给数据中所有的数据点创建div添加动态的高度
d3.select('body').selectAll('div').data(tmp).enter().style('height',d=>d+'px')
//动态的设置数据点每个div的高度
  1. SVG 是Scalable Vector Graphics的缩写。

"scalable" 的意思是如果放大或缩小一个对象,它不会像素化。不管是在小的移动手机屏幕上还是在大的电视显示器上它都会随着显示系统缩放。

SVG 用于制作常见的几何图形。由于 D3 将数据映射成可视化表达,它用 SVG 来创建可视化的图形。网页上的 SVG 图形必须在 HTML 的svg标签中。

//在body中添加一个svg标签,添加宽高属性
d3.select('body').append('svg').attr('width',100).attr('height',200)
  1. 在svg中创建一个矩形,设置宽高属性和坐标属性值
const svg=select('body').append('svg').attr('height',400).attr('width',500).style('background-color','red');
//创建矩形
svg.append('rect').attr('height',100).attr('width',300).attr('x',0).attr('y',0);
  1. d3给svg动态设置每个bar坐标 ,D3 的attr()方法可接收一个回调函数来动态设置属性 attr(type,(item,index)=>{}),回调第一个参数是每项数据值,第二个是数组下标
const dataset=[1,2,3,4]
const w=100,
const h=400
const svg=d3.select('body').append('svg').attr('width',w).attr('height',h);
const rect=svg.selectAll('rect').data(dataset).enter().append('rect').attr('width',50).attr('height',200).attr('x',(item,index)=>{
    return index*30
})
//返回x坐标乘以30的值,设置每个数据的x的值
//同理改变高度也是这样的回调
  1. svg的坐标有些特别,x为0是在左上角,x增加会向右延申,y为0是在最上方,y增加会像下延申
  • 翻转svg,改变y坐标特有的公式
y=heightSvg-m*heightBar;
//m是svg缩放的比例
  • 创建一个柱状图,并翻转为朝上的的svg
const dataset=[10,20,30,40,20]
const w=400;
const h=200;
const svg=d3.select('body').append('svg').attr('width',w).attr('height',h);
const bar=svg.selectAll('rect').data(dataset).enter().append('rect').attr('width',30).attr('height',(item,index)=>{
    return item*10
}).attr('x',0).attr('y',(d,i)=>{
    return h-3*d
})
  • attr('fill','red') svg的rect通过设置fill改变元素颜色
rect.attr('fill','red')
  1. 给 D3 元素添加标签,通过给svg添加text元素来显示数据,给每个数据都添加上标签
const dataset=[12, 31, 22, 17, 25, 18, 29, 14, 9]
const w=500;
const h=120;
const svg=select('body').append('svg').attr('height',h).attr('width',w);
const rect=svg.selectAll('rect').data(dataset).enter().attr('x',d=>d*30).attr('y',(d,i)=>{
    return h-d*3
}).attr('height',d=>d*3).attr('width',25).attr('fill','red');
//添加text元素同时显示数值
svg.selectAll('text').data(dataset).enter().append('text').attr('x',d=>d*30).attr('y',(d,i)=>{
    return h-d*3-8 //因为y轴坐标向下延申的,这里的减去8,让y坐标向上,比柱状图的坐标少8个单位
}).text(d=>d);
  1. 给svg的text元素通过fill改变style的样式
svg.selectAll('text').data(dataset).enter().append('text').text(d=>d).style('fill','red').style('font-size',24+'px');
//通过设置fill改变svg的text元素的颜色属性
  1. 给rect添加工具提示title标签
rect.append('title').text(d=>d)
  1. 使用svg创建散点图使用svg的circle创建散点图
svg.selectAll('circle').data(dataset).enter().append('circle')
  • 给circle元素添加属性

cicle有三个属性值cx和cy是坐标值,r半径值 半径决定了circle的大小。 circle的cy是从svg的顶端开始测量而不是低端开始测量的,circle 所有的属性都可以用回调函数来动态设值。

为circle元素添加cx、cy、r属性。cx的值应该是dataset中每个对象的数组的第一个数,cy的值应该根据数据中的第二个数,但是要确保正向显示图表而不是倒转。所有圆圈的r的值应该为 5。

//给svg元素添加circle元素给circle元素添加三个属性
//cx,cy,r===>分别是坐标和半径
const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];
const w=500;
const h=500;
const svg=select('body').append('svg').attr('width',w).attr('height',h);
const circle=svg.selectAll('circle').data(dataset).enter().append('circle').attr('cx',d=>d[0]).attr('cy',d=>h-d[1]).attr('r',5)
//设置了circle的cy坐标是svg的高度减掉每条数据得出来的不是反着的cy坐标的circle
  • 给circle添加标签text

用text元素为散点图中的每个点创建标签。标签的文本应该为用一个逗号和一个空格分隔开的两个值,例如,第一个点的标签为 "34, 78"。设置x属性比circle的cx属性大 5 个单位,设置y属性和circle的cy属性相同。

const dataset = [
                  [ 34,    78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,    411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,   333 ],
                  [ 78,    320 ],
                  [ 21,    123 ]
                ];
const w=500;
const h=500;
const svg=select('body').append('svg').attr('width',w).attr('height',h);
const circle=svg.selectAll('circle').data(dataset).enter().append('circle').attr('cx',d=>d[0]).attr('cy',d=>h-d[1]).attr('r',5)
//添加text标签
svg.selectAll('text').data(dataset).enter().append('text').attr('x',d=>d[0]+5).attr('y',d=>h-d[1]).text(d=>d[0]+', '+d[1])
  1. 用 D3 创建线性比例
  • D3 有几种缩放类型。对于线性缩放(通常使用于定量数据),使用 D3 的scaleLinear()方法

D3 中,比例尺可帮助布局数据。Scales是告诉程序如何将一组原始数据点映射到 SVG 画布上像素的函数。

const scale=d3.scaleLinear()
  • 改变scale变量的值创建线性缩放,然后将output变量设置为scale函数(参数为 50)。
const scale=d3.scaleLinear();//创建线性缩放
const output=scale(50);
d3.select('body').append("h2").text(output);
  1. 用 D3 实现数据可视化:按比例设置域和范围

d3通过scale来设置缩放的比例,scale有两个方法,一个是domain设置域,一个是range来设置范围,通过domain和range之间的线性关系来找出给定数字的输出的值。

  • domain是缩放的输入信息输入的是{数据集范围}===>需要手动设置
  • range 是输出信息,比如输出到x轴的映射点的范围
//创建线性缩放scale
const scale=d3.scaleLinear();
scale.domain([250,500])
//创建数据集范围是250-500的域
scale.range([10,150])
//创建范围
const output=scale(50);
d3.select('body').append('h2').text(output);
  1. 用 D3 实现数据可视化:使用 d3.max 和 d3.min 函数在数据集中查找最小值和最大值

由于数据集范围很大的时候,很难找到最小值和最大值范围,所以d3提供了max()和min()两个方法来查找数据集中的最大值和最小值=====>二维数组就是只有两个维度x和y三维数组有三个轴x,y,z examples==>二维数组[[1,2],[2,3]]三维数组[[1,2,3],[2,3,4],[2,3,4]]

  • max(data,d=>d)和min(data,d=>d)支持回调
//找出三维数组的z轴最大值
const dataset=[[1,3,4],[2,34,3],[1,3,5]]
const output=d3.max(dataset,d=>d[2])

空文件

简介

学习d3的学习记录 展开 收起
JavaScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/weblfg/index.git
git@gitee.com:weblfg/index.git
weblfg
index
D3数据可视化学习记录
master

搜索帮助

14c37bed 8189591 565d56ea 8189591