d3.select('body').append('a').text('hello wolrd d3 ')
//这里添加一个a标签到body中文本是hello world d3
d3.select('ul').selectAll('li').text('hello')
const tmp = ["a", "b", "c"];
d3.select('ul').selectAll('li').data(tmp).enter().append('li').text('hello');
d3.select('ul').selectAll('li').data(tmp).enter().append('li').text(d=>d+'usd')
d3.select('body').style('color','red')
d3.select('body').selectAll('h2').style('color',(d)=>{
if(d<4){
return 'green'
}else{
return 'red'
}
})
<style>
.liStyle{
font-size:10px;
color:red;
font-weight:400;
}
</style>
<script>
d3.select('body').selectAll('li').attr('class','liStyle')
</script>
d3.select('body').selectAll('div').data(tmp).enter().style('height',d=>d+'px')
//动态的设置数据点每个div的高度
"scalable" 的意思是如果放大或缩小一个对象,它不会像素化。不管是在小的移动手机屏幕上还是在大的电视显示器上它都会随着显示系统缩放。
SVG 用于制作常见的几何图形。由于 D3 将数据映射成可视化表达,它用 SVG 来创建可视化的图形。网页上的 SVG 图形必须在 HTML 的svg标签中。
//在body中添加一个svg标签,添加宽高属性
d3.select('body').append('svg').attr('width',100).attr('height',200)
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);
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的值
//同理改变高度也是这样的回调
y=heightSvg-m*heightBar;
//m是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
})
rect.attr('fill','red')
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);
svg.selectAll('text').data(dataset).enter().append('text').text(d=>d).style('fill','red').style('font-size',24+'px');
//通过设置fill改变svg的text元素的颜色属性
rect.append('title').text(d=>d)
svg.selectAll('circle').data(dataset).enter().append('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
用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])
D3 中,比例尺可帮助布局数据。Scales是告诉程序如何将一组原始数据点映射到 SVG 画布上像素的函数。
const scale=d3.scaleLinear()
const scale=d3.scaleLinear();//创建线性缩放
const output=scale(50);
d3.select('body').append("h2").text(output);
d3通过scale来设置缩放的比例,scale有两个方法,一个是domain设置域,一个是range来设置范围,通过domain和range之间的线性关系来找出给定数字的输出的值。
//创建线性缩放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);
由于数据集范围很大的时候,很难找到最小值和最大值范围,所以d3提供了max()和min()两个方法来查找数据集中的最大值和最小值=====>二维数组就是只有两个维度x和y三维数组有三个轴x,y,z examples==>二维数组[[1,2],[2,3]]三维数组[[1,2,3],[2,3,4],[2,3,4]]
//找出三维数组的z轴最大值
const dataset=[[1,3,4],[2,34,3],[1,3,5]]
const output=d3.max(dataset,d=>d[2])
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。