pie-chart-block.php

<div class="pie-chart-block">

	<?php if (get_sub_field('chart_description')): ?>
	<div class="pie-chart-description">
	<?= get_sub_field('chart_description'); ?>
	</div>
	<?php endif; ?>


	<?php 
	$segments = array();
	while(have_rows('chart_segments')) {
		the_row();
		$segments[] = array(
			'title_of_segment'=>get_sub_field('title_of_segment'),
			'segment_display_value'=>get_sub_field('segment_display_value'),
			'segment_value'=> get_sub_field('segment_value')
		);
	} 
	$chart_div_id = 'pie-chart-' . rand(0,90000);
	$json = json_encode(array(
		'chart_div_id' => $chart_div_id,
		'segments' => $segments
	));
	?>

	<div class="pie-chart-wrap" id="<?= $chart_div_id; ?>"></div>
	<script>
		if (typeof PIE_CHARTS == 'undefined') {
			var PIE_CHARTS = [];
		}
		PIE_CHARTS.push(<?= $json ?>);
	</script>

</div>

piechart.js

// requires https://d3js.org v5.9.2
//  
function piechart() {
	if (typeof PIE_CHARTS != 'undefined') {
		// Define the div for the tooltip
		var tooltipDiv = d3.select("body").append("div")	
		.attr("class", "pie-chart-tooltip")				
		.style("opacity", 0);

		PIE_CHARTS.forEach(function (pieChart) {
			var colourRange = ["#2B6BC4", "#007D3D", "#009CB0", "#E0A600", "#6B4594"];
			var totalValue = pieChart.segments.reduce(function(prev,cur) { return prev + Number(cur.segment_value); },0);
			
			
			// append the svg object to the div called 'my_dataviz'
			 var svgWrap = d3.select("#" + pieChart.chart_div_id)
				.append("div")
				.attr("class","pie-chart-inner");

			// set the dimensions and margins of the graph
			var width = $('.pie-chart-inner').width(),
			height = $('.pie-chart-inner').width(),
			margin = 5
			// The radius of the pieplot is half the width or half the height (smallest one). I substract a bit of margin.
			var radius = Math.min(width, height) / 2 - margin


			var svg = svgWrap.append("svg")
				.attr("width", width)
				.attr("height", height)
			.append("g")
				.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

			// Create dummy data
			var data = pieChart.segments; //.map(function(s) { return s.segment_value; })

			// set the color scale
			var color = d3.scaleOrdinal()
			.domain(data)
			.range(colourRange)

			// Compute the position of each group on the pie:
			var pie = d3.pie()
			.value(function(d) {return d.value.segment_value; })
			var data_ready = pie(d3.entries(data))

			// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
			svg
			.selectAll('whatever')
			.data(data_ready)
			.enter()
			.append('path')
			.attr('d', d3.arc()
				.innerRadius(0)
				.outerRadius(radius)
			)
			.attr('fill', function(d,i){ return(colourRange[i%colourRange.length]) })
			// .attr("stroke", "black")
			// .style("stroke-width", "2px")
			// .style("opacity", 0.7)
			.on("mouseover", function(d) {		
				tooltipDiv.transition()		
					.duration(200)		
					.style("opacity", 1);		
					
				tooltipDiv.html( Math.round( (Number(d.data.value.segment_value) / totalValue)*100) + '% (' + d.data.value.segment_display_value + ')')	
					.style("left", (d3.event.pageX) + "px")		
					.style("top", (d3.event.pageY - 28) + "px");	
				})					
			.on("mouseout", function(d) {		
				tooltipDiv.transition()		
					.duration(500)		
					.style("opacity", 0);	
			});
			
			var legendDiv = d3.select("#" + pieChart.chart_div_id)
				.append("div")
				.attr("class","pie-chart-legend");
			
			legendDiv.append("h3").text("key").attr('class','pie-chart-legend-title');

			var legendItems = legendDiv
				.append('ul')
				.attr('class','pie-chart-legend-list')
				.selectAll('li')
				.data(pieChart.segments)
				.enter()
				.append('li')
				.attr('class','pie-chart-legend-item');
			legendItems
				.append('span')
				.attr('class','pie-chart-legend-colour')
				.attr('style',function(d,i) {  return 'background-color:' + colourRange[i%colourRange.length]; });
			legendItems
				.append('span')
				.attr('class','pie-chart-legend-label')
				.text(function(d) {return d.title_of_segment; });

		});
	}
}