d3实现曲线面积图，柱状图，天气曲线 案例

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中绘制面积的函数

.x(function(d, i) {

let index = i + 1

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

}) //曲线中x的值

.y0(this.padding) //相当于x坐标

.y1(function(d, i) {

return self.scale(d)

}) //曲线中y的值

.interpolate(“cardinal”) //把曲线设置光滑

self.svg.append(“g”)

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

.append(“path”)

.attr(“d”, area_generator(this.data))

.style(“fill”, “cornflowerblue”)

.style(“fill”, “url(#” + linearGradient.attr(“id”) + “)”)

}

this.circle = function() {//绘制圆点

self.svg.selectAll(“circle”)

.data(data)

.enter()

.append(‘circle’)

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

let index = i + 1

return index * padding - padding / 2

})

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

return self.scale(d)

})

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

.attr(‘r’, self.circleobj.r)

.attr(‘stroke’, self.circleobj.stroke)

.attr(‘stroke-width’, self.circleobj.strokewidth)

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

}

this.bar = function() {//绘制条形图

self.svg.selectAll(“rect”)

.data(data)

.enter()

.append(‘rect’)

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

let index = i + 1

return index * padding - padding / 2

})

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

return self.scale(d)

})

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

.attr(‘width’, self.barObj.width)

.attr(“height”, function(d) {

return self.height - self.scale(d)

})

}

}

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-9dv21TEo-1718693729825)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串