How draw pie diagram from json data?
How draw pie diagram from json data?
I use d3 libray version5.
I try draw pie diagram. My data storage in json object. Please help me. Live demo is here.
My javascript code:
const data = [
id: 0, label: 'qqqqq', percent: 50,
id: 1, label: 'wwww', percent: 30,
id: 2, label: 'eeeee', percent: 20
];
const svg = d3.select("#segmentsGraph"),
width = 250,
height = 250,
radius = Math.min(width, height) / 2,
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
const color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
const pie = d3.pie()
.sort(null)
.value(function(d) return d.label; );
const path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
const label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
data.forEach((d) =>
console.log(d);
const arc = g.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) return color(d.percent); );
arc.append("text")
.attr("transform", function(d) return "translate(" + label.centroid(d) + ")"; )
.attr("dy", "0.35em")
.text(function(d) return d.percent; );
);
I searched for the documentation and found the following example. But this example not worked in jsfiddle...
this.segments
@rioV8 sorry, i update question
– rettoryh13
Aug 31 at 13:12
how many pie graphs do you want to draw? You probably see only one (1) but you try N (3), that is because of the
join pattern.– rioV8
Aug 31 at 13:29
join
2 Answers
2
I have changed your code to draw a pie:
const data = [
id: 0, label: 'qqqqq', percent: 50,
id: 1, label: 'wwww', percent: 30,
id: 2, label: 'eeeee', percent: 20
];
const svg = d3.select("#segmentsGraph"),
width = 250,
height = 250,
radius = Math.min(width, height) / 2,
g = svg.attr("height", height).attr("width", width).append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
const color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
const pie = d3.pie()
.sort(null)
.value(function(d) return d.percent; );
const path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
const label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
const arc = g.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) return color(d.data.id); );
arc.append("text")
.attr("transform", function(d) return "translate(" + label.centroid(d) + ")"; )
.attr("dy", "0.35em")
.text(function(d) return d.data.percent; );
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<svg id="segmentsGraph"></svg>
You should use a numeric value in d3.pie().value() method. It will create a new dataset mapping the proportion of d.value and the sum of all d.value to angles. I recommend you to run a console.log(arc.data()) for a better understanding of your new dataset.
You don't need to iterate over your data using forEach because data().enter() does it for you.
Use latest d3 its working..
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>
<style type="text/css">
.slice text
font-size: 16pt;
font-family: Arial;
</style>
</head>
<body>
<script type="text/javascript">
var w = 300,
h = 300,
r = 100,
color = d3.scale.category20c();
data = ["label":"one", "value":20,
"label":"two", "value":50,
"label":"three", "value":30];
var vis = d3.select("body")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")")
var arc = d3.svg.arc()
.outerRadius(r);
var pie = d3.layout.pie()
.value(function(d) return d.value; );
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i) return color(i); )
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d)
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
)
.attr("text-anchor", "middle")
.text(function(d, i) return data[i].label; );
</script>
</body>
</html>
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
have a real close look at your code and the example, what is
this.segments.– rioV8
Aug 31 at 12:55