前端Angular+Rxjs+Stylus+d3實踐技术頭條網

前端Angular+Rxjs+Stylus+d3實踐

2019-11-15 08:25:02 前端漫談

技術選型

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 height


 const 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-length
 const 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-length
 const 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-length
 const 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;
}