前端Angular+Rxjs+Stylus+d3实践

技术选型

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

参考文献

npm install

echart demo

SVG

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