Technology selection

Angular8- CLI – Build environment, view components

Rxjs – Provides data flow

Stylus — Custom style

D3 — Draw diagrams and bring the data to life using HTML, SVG and CSS3

Echart — Demo reference

Premise basic knowledge

HTML

  • HTML provides elements that define headings, paragraphs, tables, and so on
#### SVG * SVG also provides elements for defining circles, rectangles, simple or complex curves, and other shapes. * A simple SVG document consists of an SVG root element and a basic shape element. * There is also a G element, which organizes several basic shapes into a groupCopy the code

CSS3

  • Beautify the interface element style

Local Environment Construction

Angular-cli build project

NPM install -g @angular/cli ng new D3-demo // Select the style stylus CD d3-demo ng serveCopy the code

Add dependencies, RXJS is installed by default

NPM install install to DependenciesCopy the code

package.json dependencies

"@ presents/animations" : "~ 8.2.11", "@ presents/common" : "~ 8.2.11", "@ presents/compiler" : "~ 8.2.11", "@ presents/core" : "~ 8.2.11 @ presents/forms", "" :" ~ 8.2.11 ", "@ presents/platform - the browser" : "~ 8.2.11", "@ presents/platform - the browser - dynamic" : "~ 8.2.11", "@ presents/router" : "~ 8.2.11", "d3" : "^ 5.12.0", "RXJS" : "~ 6.4.0", "tslib" : "^ 1.10.0", "zone. Js" : "~ 0.9.1"Copy the code

The development of

Define the data

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');Copy the code

draw

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");
      })
      ;
  }Copy the code

style

/* 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;
}Copy the code

reference

npm install

echart demo

SVG

By CheongHu, Chief Front-end Experiencer

Contact email: [email protected]