Production of "D3.js Starter Series---9.1" pie chart

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

This section of layout makes a pie chart. In the 9th section, the function of Layout is to transform data into data that is unsuitable for graphical data. Now use the following data:

var DataSet = [30, 10, 43, 55, 13];

This data should not be used directly in the appeased chart, we must convert it to an angle by calculation. This calculation does not need to be calculated manually because the D3.layout.pie () function is provided in D3, which is used to convert the above data into the desired angle of the pie chart. A function like this is defined below.

var pie = D3.layout.pie ();

Be sure to remember that this is afunction, when you use it, you want the Pie (dataset) to convert the data. We can first look at what data is output after the conversion.

As shown, 5 integers are converted to 5 objects, each containing a starting angle and an end angle , as well as the original integer . This kind of data is suitable for making pie chart, this is the function of Layout. However, it is important to note that in the actual drawing, there is still a need for other methods of drawing.

We can use the arc method to make the pie chart, because the curve has the thickness, the adjustment thickness can become the pie chart, below we add the following code:

var Outerradius = Width/2;var Innerradius = Width/4;var arc = D3.svg.arc (). Innerradius (Innerradius). Outerradius (OuterR Adius);

Outerradius and Innerradius are the outer radius and inner radius of the arc, width is the breadth of the SVG draw box, and the Outerradius-innerradius is the thickness of the arc. Then we define an arc of the function arc, and pass the inner and outer radius to it. Be aware that arc is also afunction。
It can then be plotted, as in the previous sections, in the SVG frame. There are 5 integers above, that is, 5 arcs. We first add 5 groupings in SVG (that is, the element G in SVG). Each grouping is an arc. The code is as follows:

var arcs = Svg.selectall ("G").  data (Pie (DataSet)).  Enter ()  . Append ("G")  . attr ("Transform", " Translate ("+outerradius+", "+outerradius+") ");

In the above code, we bound the converted data pie (dataset), there are 5 data, so we will add 5 g elements, the last line of code is the position of moving elements, the default starting position is the SVG draw box (0,0) coordinates, that is, the upper left corner. Note that this time the above code returns theChoose between 5 g elements at the same time.

Next, for each G element, add path.

Arcs.append ("path"). attr ("Fill", function (d,i) {return color (i);}). attr ("D", function (d) {return arc (d);});

Since ARCS selects 5 g elements at the same time, after append ("Pah"), there is a path in each g, then the color attribute, and the path attribute are added. Color (i) is a defined function.

var color = D3.scale.category10 ();

The path attribute in SVG is D, whose value is arc (d), which is the value of the bound data as the parameters of the function arc defined above.

Next, add the text in the center of each arc.

Arcs.append ("text"). attr ("Transform", function (d) {return "translate (" + arc.centroid (d) + ")";} ". attr ("Text-anchor", "Middle"). Text (function (d) {return d.value;});

Arc.centroid (d) can calculate the center of the arc, pay attention to a code, return is D.value, not D, because the current binding data is an Object, there is a starting angle equivalent, D.value is the value of the meta integer, visible above.

OK, look at the result map.

The complete code is as follows:

Production of "D3.js Starter Series---9.1" pie chart