D3.js the method of realizing pie chart _javascript skills

Objective

I have already shared with you the two basic graphs of how to use histogram and line charts. Both charts have axes, and now a chart without axes--pie charts.

Pie chart Implementation

As before, we first put together a simple drawing frame and added an SVG canvas. But notice here that, for the sake of the arcs on the Gao diagram, we move the G element that combines these elements to the center of the canvas:

<! DOCTYPE html>
 
 

Simulate data and transform

To Gao graphs, we simulate some of these data.

Simulated data
var dataset = [
 {name: ' Shopping ', value:983},
 {name: ' daily diet ', value:300},
 {name: ' Medicine ', value:1400},
   {name: ' Traffic ', value:402},
 {name: ' Miscellaneous ', value:134}
];

In charts such as histogram, we create the right scale to translate the simulated data into suitable drawing data, and what is the transformation in the pie chart? Look here ~

Convert raw data to data that can be used for drawing
var pie = D3.layout.pie ()
  . Sort (null)
  . Value (function (d) {return
   d.value;
  });
//Pie is a function of 
var piedata = pie (DataSet);

Layout is called a layout, and in D3.js it provides a number of functions that are converted to specific chart data, including pie charts. It provides a basic transformation function, on the basis of which we further set the function according to our own needs, and we get the same transformation tool as the function saved by the pie variable in the above code, and the drawing data piedata can be obtained by passing the original dataset into pie.

The specific changes we can look at the picture below.

The left is the original data structure before the transformation, and the right is the transformed data structure suitable for the drawing. As you can see, on the basis of preserving the original data, the converted data adds the starting angle (StartAngle and Endangle) of the item throughout the pie chart, and the gap angle between arcs (padangle).

To calculate an ARC path

In the pie chart, we use the path element in SVG to represent each arc, and the D attribute from piedata to the path element has a certain distance, so I also need to use the piedata to compute the values available for the D attribute in one step.

Create a function that calculates an ARC path
var radius =;
var arc = D3.svg.arc ()
 . Innerradius (0)
 

Add arcs

The code above svg.arc() creates a function that computes an arc path, and this function allows you to calculate the value of the D property of the path, as shown below.

Add Arc
main.selectall (' G ')
 . Data (piedata).
 Enter ()
 . Append (' path ')
 . attr (' Fill ', function (d, i) {return
  getcolor (i);
 })
 . attr (' d ', function (d) {return
  arc (d);
 });

Well, the pie chart is painted like this.

Let's share an example code to implement a text label like the one in the pie chart.

Effect chart

Instance Code

<! DOCTYPE html>  

Summarize

The above is the use of d3.js to achieve the entire pie chart, I hope this article for everyone's study and work can help. If you have questions you can message exchange, small series will be updated on the d3.js of the article, please continue to pay attention to cloud habitat community.