2024年Web前端最新d3实现曲线面积图，柱状图，天气曲线 案例(1)，金三银四Web前端面试的一些感受

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

top: 30

}

let textObj = {

fill: ‘#303133’,

size: 14,

textanchor: ‘middle’,

top: 20

}

let areaObj = {

color1: ‘rgba(255, 191, 0, 0)’,

color2: ‘rgba(255, 191, 0, 0.4)’,

id: ‘linearColor1’,

top: 30

}

let circleObj = {

fill: ‘rgba(255, 191, 0, 1)’,

r: 4,

stroke: ‘red’,

strokewidth: 2

}

let barObj = {

fill: ‘rgba(125, 149, 201, 0.3)’,

width: 20,

}

let data = [20, 5, -10, 3, 10, 9, 8, 30, 5]

let mywidth = data.length * 100

let onepadding = 100

/**

创建实例， 去使用封装好的方法

**/

let mydrow = new drow(‘.whiteline’, data, mywidth, onepadding, height, lineObj, textObj, areaObj, circleObj, barObj)

mydrow.drowLine() //直接绘制曲线

mydrow.drowarea() //增加面积图

mydrow.drowText() //增加文字

mydrow.circle() //增加圆点

mydrow.bar() //绘制条形图

function drow(el, data, width, padding, height, lineObj, textObj, areaObj, circleobj, barObj) {

this.data = data

this.width = width

this.padding = padding

this.height = height

this.lineObj = lineObj

this.textObj = textObj

this.areaObj = areaObj

this.circleobj = circleobj

this.barObj = barObj

this.el = el

this.lineGen = d3.svg.line()

this.scale = d3.scale.linear()

.domain([Math.min.apply(null, this.data), Math.max.apply(null, this.data)])

.range([(this.height / 2), 0])

this.svg = d3.selectAll(this.el)

.append(‘svg’)

.attr(‘width’, this.width)

.attr(‘height’, this.height)

let self = this

this.drowLine = function() {//绘制曲线

self.lineGen.x(function(d, i) {

let index = i + 1

return index * self.padding - self.padding / 2

})

.y(function(d, i) {

return self.scale(d)

})

.interpolate(“cardinal”)

self.svg.append(‘g’)

.attr(“transform”, “translate(0,” + self.lineObj.top + “)”)

.append(‘svg:path’)

.attr(‘d’, self.lineGen(self.data))

.attr(‘stroke’, self.lineObj.color)

.attr(‘stroke-width’, self.lineObj.width)

.attr(‘fill’, ‘none’)

}

this.drowText = function() {//绘制文字

self.svg.selectAll(“text”)

.data(self.data)

.enter()

.append(‘text’)

.text(function(d, i) {

return d

})

.attr(‘x’, function(d, i) {

let index = i + 1

return index * self.padding - self.padding / 2

})

.attr(‘y’, function(d, i) {

return self.scale(d)

})

.attr(“text-anchor”, self.textObj.textanchor)

.attr(“fill”, self.textObj.fill)

.attr(‘font-size’, self.textObj.size)

.attr(“transform”, “translate(0,” + self.textObj.top + “)”)

}

this.drowarea = function() {//绘制面积

let defs = self.svg.append(“defs”);

let linearGradient = defs.append(“linearGradient”)

.attr(“id”, self.areaObj.id)

.attr(“x1”, “0%”)

.attr(“y1”, “100%”)

.attr(“x2”, “0%”)

.attr(“y2”, “0%”);

let stop1 = linearGradient.append(“stop”)

.attr(“offset”, “0%”)

.style(“stop-color”, self.areaObj.color1);

let stop2 = linearGradient.append(“stop”)

.attr(“offset”, “100%”)

.style(“stop-color”, self.areaObj.color2);

let area_generator = d3.svg.area() //d3中绘制面积的函数

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

bs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

[外链图片转存中…(img-kUBr5Qyo-1715419979676)]

[外链图片转存中…(img-VFK98OBq-1715419979676)]

[外链图片转存中…(img-h7GNuPQI-1715419979677)]