前端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"