d3的安装npm install d3 --save
在需要的文件中导入import * as d3 from "d3"
向svg中填充图形
<template>
<div class="dthreeAppend">
<p class="title">This is a d3</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="600" height="300"></svg>
</div>
</template>
<script>
import * as d3 from "d3"
export default {
mounted(){
var svg=d3.select('svg')
.attr('width',600)
.attr('height',400)
svg.append('circle')
.attr('cx',100) //cx,cy圆心坐标
.attr('cy',200)
.attr('r',50) //r圆心半径
.attr('fill','blue'); //将圆设置为蓝色
svg.append('rect') //矩形
.attr('x',50) //矩形左上角横坐标
.attr('y',50) //矩形左上角纵坐标
.attr('width',100) //矩形宽
.attr('height',50) //矩形高
.attr('fill','skyblue')
}
}
</script>
<style lang="less" scoped>
.dthreeAppend{
.title{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 20px;
}
svg{
width: 600px;
height: 300px;
border: 1px solid #000;
}
}
</style>
d3柱形图
<template>
<div class="dthreeBar">
<p class="title">d3柱形图</p>
</div>
</template>
<script>
import * as d3 from "d3"
export default {
mounted(){
var dthreeBar=d3.select('.dthreeBar');
var dataset=[72,32,56,92];
var width=200;
var height=100;
var svg=dthreeBar.append('svg')
.attr('width',width)
.attr('height',height)
.style('border','1px solid #000')
var rects=svg.selectAll('.myRact')
.data(dataset)
.enter()
.append('rect')
.attr('class',"myRact")
.attr('fill','skyblue') //将圆柱变为天蓝色
.attr('x',function(d,i){
return 20+35*i; //20,55,90,125
})
.attr('y',function(d){
return height-d; //88,78,44,88
})
.attr('width',30) //圆柱的宽30,两个圆柱之间的间隔为5
.attr('height',function(d){
return d //圆柱的高为d(即dataset里的值)
})
//添加文字部分
var padding={top:15,left:20,right:5,bottom:0} //设置padding
var text=svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('fill','red')
.attr('font-size','14px')
.attr('text-anchor','middle') //text-anchor属性用于对齐(开始,中间或结束对齐)相对于给定点的文本字符串
.attr('x',function(d,i){
return padding.left + i*35;
})
.attr('y',function(d){
return height-padding.bottom -d;
})
.attr('dx',30 /2) //dx是相对于x平移的大小
.attr('dy','1em')
.text(function(d){
return d;
})
}
}
</script>
<style lang="less" scoped>
.dthreeBar{
.title{
font-size: 20px;
font-weight: 600;
color: blue;
margin-bottom: 20px;
}
}
</style>
选择集、数据绑定
<template>
<div class="dthreeSelect">
<p>apple</p>
<p>pear</p>
<p>banana</p>
<span>one</span>
<span class="my_span">two</span>
<span class="my_span">three</span>
<div></div>
<div></div>
<div></div>
</div>
</template>
<script>
import * as d3 from "d3"
export default {
mounted(){
//选择集,select选中所有中的第一个,selectAll选中所有
var dthreeSelect=d3.select('.dthreeSelect');
dthreeSelect.style('background',"#ededed");
var p=dthreeSelect.selectAll('p');
p.style("color","red");
//如何绑定第二个p,可以给p添加一个类名
var span =dthreeSelect.selectAll('.my_span');
span.style('color','blue')
//数据绑定,D3 最大的特色就是能够将数据绑定到DOM上
var div=dthreeSelect.selectAll('div');
// var num = 30;
//datum():将指定数据赋值给被选择元素。
// div.datum(num);
var num1 =[20,11,23,60,70];
//data():将数据数组与选择集的元素结合。
//update
div.data(num1);
//参数d为数据 ,i为索引号(从0开始)
div.text(function(d,i){
return d +" "+ i;
});
div.style('color',function(d,i){
return i%2==0 ? "blue":"red" //索引为偶数时,背景为蓝色,为奇数时,背景为红色
});
//update 表示既拥html页面元素,又拥有数据;常常用于更新
//enter 表示无html页面元素,拥有数据;常常用于添加数据;
div.enter().append('div')
.text(function(d) {return d;})
//exit表示只拥有元素未能拥有数据,常用用于页面元素的批量删除
// var exit=update.exit()
// .remove();
}
}
</script>
<style lang="less" scoped>
.dthreeSelect{
width: 600px;
height: 300px;
border: 1px solid #000;
span{
margin-left: 30px;
}
}
</style>
比例尺
线性比例尺
//线性比例尺
var dataset=[1.2,2.3,0.9,1.5,3.3];
var min=d3.min(dataset);
var max=d3.max(dataset);
let linear=d3.scaleLinear() //d3.scaleLinear()返回一个线性比例尺,返回值可以当做函数来使用
.domain([min,max]) //设置定义域,[min,max],相当于x轴
.range([0,300]); //设置值域,相当于y轴 该线性函数为 y=125x-112.5
console.log(linear(0.9))
console.log(linear(2.3))
console.log(linear(3.3))
序数比例尺
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scaleOrdinal() // 生成序数比例尺
.domain(index)
.range(color);
console.log(ordinal(0))
console.log(ordinal(2))
console.log(ordinal(4))
坐标轴d3.axisTop(scale)
为给定的scale构造一个新的面向顶部的轴生成器,其中带有空的刻度参数
线性d3.axisRight(scale)
为给定的scale构造一个新的面向右的轴生成器,其中带有空的刻度参数
线性d3.axisBottom(scale)
为给定的scale构造一个新的面向下的轴生成器,其中带有空的刻度参数
线性d3.axisLeft(scale)
为给定的scale构造一个新的面向左的轴生成器,其中带有空的刻度参数
线性
let x = d3.scaleLinear().range([10, width-10])
let xScale = x.domain([0, 10])
时间型
let x = d3.scaleTime().range([20, width-20])
let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])
不从零开始的非连续性x坐标轴
let x=d3.scaleBand().range([0,width])
let xScale =x.domain(['北京','上海','广州','深圳'])
mounted()方法中的完整代码
let height=300;
let width=500;
var scale=d3.select('.scale');
var svg=scale.append('svg')
.attr('width',width)
.attr('height',height)
let x = d3.scaleLinear().range([10, width-10])
let xScale = x.domain([0, 10])
// let x = d3.scaleTime().range([20, width-20])
// let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])
// let x=d3.scaleBand().range([0,width])
// let xScale =x.domain(['北京','上海','广州','深圳'])
var dataset=[150,60,30,80,142,230,45,25,10,23]
let rects=svg.selectAll('myRect')
.data(dataset)
.enter()
.append('rect')
.attr('class','myRact')
.attr('fill','skyblue')
.attr('x',function(d,i){
return 10+50*i;
})
.attr('y',function(d){
return 0;
})
.attr('width',30)
.attr('height',function(d){
return d
})
//x轴
let xAxis=svg.append('g')
.attr('class','xAxis')
.attr('tranform',`translate(0,${height})`)
.call(d3.axisBottom(xScale))
来源:CSDN
作者:drunk喵咪
链接:https://blog.csdn.net/jdrunk/article/details/103492272