<!DOCTYPE html>
<
html
>
<
head
>
</
script
>
</
head
>
<
body
>
<
div
style="width:300px;
height:300px;">
<
center
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
>
pie.sortValues();
</
h2
>
</
center
>
<
svg
width
=
"300"
height
=
"250"
>
</
svg
>
<
button
>Clickme</
button
>
</
div
>
<
script
>
// Data to be added in the pie chart
var data = [
{ "property": "fp5", "value": "5" },
{ "property": "gp5", "value": "6" },
{ "property": "bp4", "value": "b" },
{ "property": "ap3", "value": "a" },
{ "property": "mp2", "value": 9 },
{ "property": "kp1", "value": "8" },
]
// Selecting SVG using d3.select()
var svg = d3.select("svg");
// Creating Pie generator
var pie = d3.pie()
// Use of pie.value() Function
.value((d) => { return d.value })
(data);
function updatePie() {
// Creating Pie generator
var pie = 0
var pie = d3.pie()
.value((d) => { return d.value })
// Use of pie.sortValues() Function
.sortValues(function (b, a) {
console.log("a: " + a + ",
b: " + b + ",
a - b: ", b - a);
return b - a;
})
(data);
// Creating arc
var arc = d3.arc()
.innerRadius(30)
.outerRadius(80);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie)
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i) => {
return d3.schemeSet1[i];
})
.attr("d", arc);
arcs.append("text")
.attr("transform", (d) => {
return "translate(" +
arc.centroid(d) + ")";
})
.text(function (d) {
return d.value;
});
}
let btn = document.querySelector("button")
btn.addEventListener("click", updatePie);
// Creating arc
var arc = d3.arc()
.innerRadius(30)
.outerRadius(80);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie)
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i) => {
return d3.schemeSet1[i];
})
.attr("d", arc);
arcs.append("text")
.attr("transform", (d) => {
return "translate(" +
arc.centroid(d) + ")";
})
.text(function (d) {
return d.value;
});
</
script
>
</
body
>
</
html
>