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

My personal blog: 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 simply 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 available in D3. This Layout is the angle used to convert the above data into a pie chart. The following defines one such function.

var pie = D3.layout.pie ();

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

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbhpobhp6/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast ">

As you can see, 5 integers are converted to 5 objects, each containing a starting angle and an end angle , and the original integer .

This data is suitable for making pie charts. This is the function of Layout. But be careful. In the actual drawing, there is still a need for other methods of drawing.

We can use the method of arc to make pie chart, because the curve has the thickness, adjust the thickness to become a pie chart, the following we add such as 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 a function .
The next can be plotted, as in the previous sections, are plotted in the SVG box. 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 bind the converted data pie (dataset). There are 5 of data. So 5 g elements are added. The last line of code is the position of the moving element, and the default starting position is the (0,0) coordinates of the SVG draw box, which is the upper-left corner. Note that this time the above code returns theSelect 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 is choosing 5 g elements at the same time, append ("PAH") has path in each G. Then add the color attribute, and the Path property.

Color (i) is a defined function.

var color = D3.scale.category10 ();

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

Next, add the text to each ARC center.

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. The return is D.value, not d. Because the data currently bound is Object. It has a starting angle equivalent, and d.value is the value of the meta integer. Visible above.

OK, look at the result map.

Complete code such as the following:

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