1.安装依赖
npm install d3 --save-dev
2.页面中引入
<template></template><script>import * as d3 from 'd3';</script>
3.使用
1) 矩形
<template></template><script>import * as d3 from 'd3';export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body")//选择文档中的body元素.append("svg")//添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度// 矩形开始d3.select('svg').append('rect').attr('x', 300).attr('width', 100).attr('height', 100).attr('fill', 'red').attr('stroke', 'blue')// 矩形结束}}}</script> <style></style>
2) 圆
<template></template><script>import * as d3 from 'd3';export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body")//选择文档中的body元素.append("svg")//添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度// 圆开始const svgWrap = d3.select('svg').append('circle')const circle = d3.select('circle').attr('cx', 600).attr('cy', 100).attr('r', 100).attr('fill', 'skyblue').attr('stroke', 'black')// 圆开始}}}</script> <style></style>
3) 简单的柱状图
<template></template><script>import * as d3 from 'd3';export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body")//选择文档中的body元素.append("svg")//添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度var rectHeight = 25; //每个矩形所占的像素高度(包括空白)var g = svg.append('g') //向svg元素中添加一个g 元素.attr('transform','translate(400,300)') //定义偏移量，也就是圆中心点的位置// 定义颜色var color = d3.schemeCategory10// 柱状图开始svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",20).attr("y",function(d,i){return i * rectHeight + 20;}).attr("width",function(d){return d;}).attr("height",rectHeight-2).attr("fill","steelblue")// 柱状图结束}}}</script> <style></style>
4) 饼图
<template></template><script>import * as d3 from 'd3';export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body")//选择文档中的body元素.append("svg")//添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度var rectHeight = 25; //每个矩形所占的像素高度(包括空白)var g = svg.append('g') //向svg元素中添加一个g 元素.attr('transform','translate(400,300)') //定义偏移量，也就是圆中心点的位置// 定义颜色var color = d3.schemeCategory10// 饼图开始var pie = d3.pie();var piedata = pie(dataset);console.log(d3)var arc = d3.arc().innerRadius(60) //圆环起始半径.outerRadius(100) //圆环结束半径;// 定义填充路径 g.selectAll('path').data(piedata) //数据填充.enter() .append('path').attr('d',arc).style('fill', function(d,i){return color[i]}) //为每个扇形填充不同颜色// 饼图结束}}}</script> <style></style>
5) 折线图(可带坐标轴、轴线）
<template></template><script>import * as d3 from 'd3';export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body")//选择文档中的body元素.append("svg")//添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度var rectHeight = 25; //每个矩形所占的像素高度(包括空白)var g = svg.append('g') //向svg元素中添加一个g 元素.attr('transform','translate(400,300)') //定义偏移量，也就是圆中心点的位置// 单折线图开始var widthLine = 500,heightLine = 250,margin={left:40,top:60,right:20,bottom:20},g_w = widthLine-margin.left-margin.right,g_h = heightLine-margin.top-margin.bottom;// 定义比例尺var xscale=d3.scaleLinear()//定义了一个类型为（linear）的比例尺.domain([0,dataset.length-1])//定义域,数据的域.range([0,g_w]).nice();//映射域:画布区域var yscale=d3.scaleLinear().domain([d3.max(dataset), 0]) .range([0,g_h]).nice();// 定义线let line=d3.line().x(function(d,i) {return xscale(i)}).y(function(d) {return yscale(d)});console.log(d3.scale)// 定义坐标轴var xAxis = d3.axisBottom().scale(xscale)// .ticks(Math.floor(dataset.length)) //轴线个数// .tickSize(g_h); // 轴线var yAxis = d3.axisLeft(yscale)// .tickSize(-g_w); // 轴线// 添加y轴var g=d3.select("svg")//此时选中的svg是上面定义的svg及其复加的内容.append("g")//添加g元素.attr("transform","translate(100,500)")//设置偏移量.call(yAxis)// 添加折线g.append('path') .attr('stroke-width', 2).attr('d', line(dataset)).attr('stroke', 'blue').attr('fill', 'none')// 添加x轴var g=d3.select("svg")//此时选中的svg是上面定义的svg及其复加的内容.append("g")//添加g元素.attr("transform","translate(100,670)")//设置偏移量.call(xAxis)}}}</script> <style></style>
一步步实现的，简单记录下来
如果觉得《vue使用d3数据可视化(柱状图 饼图 折线图 带坐标轴）》对你有帮助，请点赞、收藏，并留下你的观点哦！
