D3- do a simple pie chart statistics

What is D3js 

D3js It is based on a data operation of the document  JavaScript library. Can help you use  HTML,  CSS,  SVG and  Canvas to display data. D3 Follow the conventional  Web standards, can operate independently without any other frame in modern browsers that combines powerful visual components to drive  DOM operation. (D3 taken from official documents https://www.d3js.org.cn/ )

Because we have to do a pie chart statistics so let's prepare some raw data, simpler words, use an array to store it

// Book of traffic data
datalist: [
        {Bookname: 'reform and opening up 40 years', clickcount: 3345},
        {Bookname: 'Lost Japan 30 years', clickcount: 2345},
        {Bookname: '. D3 description and use', clickcount: 2346},
        {Bookname: 'Secret vue', clickcount: 753},
        {Bookname: 'js Definitive Guide', clickcount: 456},
        {Bookname: 'simple programming', clickcount: 763},
        {Bookname: 'Unknown Books', clickcount: 5673}
      ]

　　svg chart put on the page after the definition of div, we used to store

<P slot = "title"> D3 simple pie </ p>
        <div class="simplepiebook">
        </div>

D3, provide a view of the dom api operation svg we will need to insert a div

Chart = d3.select the let ( '. simplepiebook'). the append ( 'SVG') // SELECT element selected which 
      .attr ( 'width', 600 )
      .attr ( 'height', 400) // svg width and height is the size of the canvas

Then we added a g element as in FIG. Svg, to wrap layer, so that after the painting can be pie in FIG svg data, this method is about the same and have too dom, with offset xy axis transform to give

let g = chart.append('g').attr(
      'transform',
      'translate(' 300'，'200')'
    )

D3 d3.arc the generator used to generate the pie chart in the sector ( https://www.d3js.org.cn/document/d3-shape/#arcs )

// define a single arc 
    the this .arc = D3
      .arc () // define a single arc 
      .innerRadius (0 ) // sector fillets

Use pie method of D3 to generate a pie chart --- sort must pay attention to if you do not pass, then he will have himself a sort, if passed in any sort will not be null

// define pie 
    the let d3.pie PIE = (). Sort ( null ) .Value ( function (D) {
       return d.clickcount
    })

Then we complete the final step, draw a circle ring, a pie chart is basically unfinished generally have a

The main use of the D3 selectAll data enter a three api

selectAll () is to select all of the elements of the incoming data is data, such as data painted pie is pie (datalist), enter the corresponding element is mostly useless binding method used, because initial we select are also not generating elements

g.selectAll ( '. ARC') // Videos FIG ring 
      .data (PIE ( the this .datalist))
      .enter()
      .append('path')
      .attr('cursor', 'pointer')
      .attr('class', 'arc')
      .attr('stroke', function (d) {
        return '#333333'
      })
      .style('fill', function (d) {
        return '#98abc5'
      })
      .each ( function (D) {
         // store the start and end of the current angle, and is made equal to 
        the let TEM = {
          ... d, endAngle: d.startAngle
        }
        d.outerRadius = radius - 10
        this._currentData = tem
      })
      // animation, duration represents an event generated for each sector needs 
      .transition ()
      .duration ( 100 )
       // Delay represents the delay time of execution 
      .delay ( function (D, I) {
         return I * 100
      })
      .attrTween ( 'D', function (Next) {
         // dynamic animate properties provided D 
        var I = d3.interpolate ( the this ._currentData, Next)
         the this ._currentData = I (0) // Reset the current angle 
        return  function ( T) {
           return _self.arc (I (T))
        }
      })

    function arcTween (outerRadius, delay) {
      _self the let = the this 
      // set easing function 
      return  function () {
        d3.select(this)
          .transition()
          .delay(delay)
          .attrTween('d', function (d) {
            var i = d3.interpolate(d.outerRadius, outerRadius)
            return function (t) {
              d.outerRadius = i(t)
              return _self.arc(d)
            }
          })
      }
    }

This makes it possible to substantially draw a pie chart is substantially, if you want to set each is not the same color, you can define an array of color, from the color painting get a picture array on the line

 

 

 We just need to take over both the standard data on the line

let piedata = pie (this.datalist) // this is the need to process data to naught FIG piedata data after the processing, based on this data we go on to naught FIG text, the text by

let label = g.append('g')

let percentLabelArc = d3
      .arc () // define a single arc text inside percent 
      .outerRadius (RADIUS - 60 )
      .innerRadius(radius - 60)

    let label = g.append('g')

    arcs.forEach ( function (D) {
       // output text percent 
      const = C percentLabelArc.centroid (D)
      label
        .append('text')
        .attr('class', 'age-text')
        .attr('fill', '#cddc39')
        .attr('font-weight', '700')
        .attr('font-size', '12px')
        .attr('text-anchor', 'middle')
        .attr('x', c[0])
        .attr('y', c[1])
        .text (d.data.bookname + 'hits:' + d.data.clickcount)
    })

Basically unfinished can generally presents a pie chart look, as well as information

 

 Of course, you can also more beautiful, we could also increase the number of mouse events mouseover, mouseout.

To summarize some of the things used in the D3 api Han

　　1.d3.selectAll 2.d3.enter selects any element when the element is smaller than the data value on the data used in the method of binding data

　　The basic method of 3.pie (datalist) processes the data into some data need pie chart, including the initial angle, angular span of a pie chart provided 4.d3.arc Videos