技术选型

Angular8-cli -- 构建环境、视图组件

Rxjs -- 提供数据流

Stylus -- 定制样式

d3 -- 绘制图表，使用HTML、SVG和CSS3让数据鲜活起来

echart -- demo参考

前提基础知识

HTML

• HTML提供了定义标题、段落、表格等等内容的元素

    #### SVG* SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。* 一个简单的SVG文档由svg根元素和基本的形状元素构成。* 另外还有一个g元素，它用来把若干个基本形状编成一个组

CSS3

• 美化界面元素样式

本地环境搭建

angular-cli构建项目

npm install -g @angular/cli 
ng new d3-demo    //  选择样式stylus 
cd d3-demo
ng serve

添加依赖,rxjs默认已安装

npm install -p d3  //安装到dependencies 

package.json dependencies

   "@angular/animations": "~8.2.11","@angular/common": "~8.2.11","@angular/compiler": "~8.2.11","@angular/core": "~8.2.11","@angular/forms": "~8.2.11","@angular/platform-browser": "~8.2.11","@angular/platform-browser-dynamic": "~8.2.11","@angular/router": "~8.2.11","d3": "^5.12.0","rxjs": "~6.4.0","tslib": "^1.10.0","zone.js": "~0.9.1"

开发

定义数据

const margin = {top: 50, right: 50, bottom: 50, left: 50}, width = window.innerWidth - margin.left - margin.right // Use the window's width, height = window.innerHeight - margin.top - margin.bottom; // Use the window's heightconst svg = d3.select('.container').append('svg').attr('width', window.innerWidth).attr('height', window.innerHeight).append('g').attr('transform', `translate(${margin.left},${margin.top})`);const xScale = d3.scaleLinear().domain([0, 31]).range([0, width]);svg.append('g').attr('class', 'x axis').attr('stroke-width', '1').attr('transform', `translate(${0},${height})`).call(d3.axisBottom(xScale));const yScale = d3.scaleLinear().domain([0, 60]).range([height, 0]);svg.append('g').attr('class', 'y axis').call(d3.axisLeft(yScale));// tslint:disable-next-line: max-line-lengthconst dataOne = [10, 11, 12, 13, 11, 9, 11, 12, 13, 11, 9, 8, 10, 12, 13, 11, 9, 8, 10, 12, 10, 13, 11, 9, 11, 12, 13, 11, 9, 8, 10].map((item, index) => {return {y: item};});this.drawLineItem(svg,  xScale, yScale, dataOne, 'yellow');// tslint:disable-next-line: max-line-lengthconst dataTwo = [30, 32, 32, 32, 32, 38, 32, 33, 36, 32, 32, 32, 34, 32, 32, 32, 39, 32, 32, 32, 32, 32, 33, 32, 32, 23, 32, 32, 32, 32, 32].map(item => {return {y: item};});this.drawLineItem(svg,  xScale, yScale, dataTwo, 'blue');// tslint:disable-next-line:max-line-lengthconst dataThree = [50, 52, 52, 52, 52, 58, 52, 55, 48, 52, 52, 52, 54, 52, 52, 52, 50, 52, 52, 52, 52, 52, 55, 52, 52, 49, 52, 52, 52, 52, 52].map(item => {return {y: item};});this.drawLineItem(svg, xScale, yScale, dataThree, 'green');

绘制

public drawLineItem(svg, xScale, yScale, data, clazz): void {const tran = d3.transition().duration(1500).ease(d3.easeLinear);const lineSvg = svg.append('g').attr('class',`line-${clazz}`); const toolTip = lineSvg.append('div').attr('class','tooltip').style("opacity", 0);const lineOne = d3.line().x((d, i) => xScale(i)).y((d, i) => yScale(d.y)).curve(d3.curveMonotoneX);lineSvg.append('path').datum(data).attr('class', `${clazz}-line`).attr('d', lineOne);lineSvg.selectAll(`.${clazz}`).data(data).enter().append('circle').attr('class', `${clazz}`).attr('cx', (d , i) => {return xScale(i);}).attr('cy', (d) => yScale(d.y)).attr('r', 5)// tslint:disable-next-line:only-arrow-functions.on('mouseover', function(value, index) {console.log("mouse over...",d3.event);toolTip.style("opacity", 1).html(value.y).style("left", (d3.event.offsetX)   "px")        .style("top", "10px");});}

样式

/* You can add global styles to this file, and also import other style files */
.container{background-color: #0A1651;
}
.line {fill: none;stroke: #ffab00;stroke-width: 3
}.overlay {fill: none;pointer-events: all
}
.axis{color:#f0f0f0;
}/* Style the dots by assigning a fill and stroke */
.dot {fill: #ffab00;stroke: #fff;
}
.yellow{fill: yellow;stroke:yellow;
}
.yellow-line{fill: none;stroke: yellow;stroke-width: 1;
}
.blue{fill: #00A1EA;stroke:#00A1EA;
}
.blue-line{fill: none;stroke: #00A1EA;stroke-width: 1;
}.green{fill: green;stroke:green;
}
.green-line{fill: none;stroke: green;stroke-width: 1;
}.focus circle {fill: none;stroke: steelblue;
}div.tooltip {    position: absolute;            text-align: center;            width: 60px;                    height: 28px;                    padding: 2px;                font: 12px sans-serif;        background: red;    border: 0px;        border-radius: 8px;            pointer-events: none;            
}
.line-green, .line-blue,line-yellow{position:relative;
}

参考文献

npm install

echart demo

SVG

本文作者：前端首席体验师(CheongHu)

联系邮箱：simple2012hcz@126.com