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

聯繫郵箱：[email protected]