Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <button type="button" onclick="createPie()">Click Me First!</button>
- <button type="button" onclick="updatePie()">Update Diagram!</button>
- <div class='foo'></div>
- const chart = {};
- const duration = 750;
- const width = 160;
- const height = 160;
- const min = Math.min(width, height);
- const oRadius = min / 2 * 0.9;
- const iRadius = min / 2.5 * 0.85;
- const pie = d3
- .pie()
- .value(function(d) {
- return d.value;
- })
- .sort(null);
- const arc = d3
- .arc()
- .outerRadius(oRadius)
- .innerRadius(iRadius);
- function arcTween(a) {
- const i = d3.interpolate(this._current, a);
- this._current = i(0);
- return function(t) {
- return arc(i(t));
- };
- };
- const labels = ['1', '2', '3', '4'];
- const color = ["rgba(126,211,33,1)", "rgba(39,173,232,1)", "rgba(229,5,1,1)", "rgba(245,166,35,1)"];
- const scale = d3.scaleOrdinal()
- .domain(labels)
- .range(color);
- const create = function(data) {
- const svg = d3
- .select('.foo')
- .append('svg')
- .attr('class', 'pie')
- .attr('width', width)
- .attr('height', height)
- .attr('id', 'svgClass');
- svg
- .append('g')
- .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
- .attr('id', 'bar');
- draw(data);
- }
- const draw = function(data) {
- const path = d3.select('#bar')
- .selectAll('path')
- .data(pie(data))
- path
- .enter()
- .append('g')
- .append('path')
- .attr('d', arc)
- .attr('fill', (d, i) => {
- return scale(d.data.name)
- });
- path
- .transition()
- .duration(duration)
- .attrTween('d', function(d) {
- const interpolate = d3.interpolate({
- startAngle: 0,
- endAngle: 0
- }, d);
- return function(t) {
- return arc(interpolate(t));
- };
- });
- };
- const data = [{
- "name": "1",
- "value": 2
- }, {
- "name": "2",
- "value": 1
- }, {
- "name": "3",
- "value": 2
- }, {
- "name": "4",
- "value": 1
- }];
- const newData = [{
- "name": "1",
- "value": 2
- }, {
- "name": "2",
- "value": 1
- }, {
- "name": "3",
- "value": 2
- }];
- function createPie() {
- create(data)
- }
- function updatePie() {
- draw(newData)
- }
Add Comment
Please, Sign In to add comment