d3 Donut Chart bei dem jedes Element einen variablen äußeren Radius hat

[Brometheus]

Hi,

ich hoffe ich bin hier richtg. Ich versuche gerade mit d3 ein Donut-Diagram mit variablem äußerem Radius zu bauen. So soll das später mal aussehen:


Über ein YT-Tutorial habe ich folgenden Quellcode gefunden, mit dem recht kompakt ein Donut-Chart bauen kann. Das Problem ist,
dass er äußere Radius konstant ist. Kann mir jemand einen Hinweis geben, wie ich den Code umbauen muss, damit jedes Element
einen eigenen äußeren Radius bekommt?
Vielen Dank schonmal!

<script type="text/javascript">
		var data = [40,50,90];
		var color = d3.scale.category10();
			
		var canvas = d3.select("body").append("svg")
				.attr("width",500)
				.attr("height",500);
				
		var group = canvas.append("g")
			.attr("transform", "translate(300,300)");
		
		var arc = d3.svg.arc()
			.innerRadius(100)
			.outerRadius(190);
			
		
		var pie = d3.layout.pie()
			.value(function (d) {return d;});
			
		var arcs = group.selectAll(".arc")
			.data(pie(data))
			.enter()
			.append("g")
			.attr("class", "arc");
			
		arcs.append("path")
			.attr("d", arc)
			.attr("fill",function (d) {return color(d.data);});
				


        </script>

 

[SteelWheel]

Schau Dir mal den "Aster Plot" an ... der kommt sehr dicht an das, was Du vor hast.

 

[kkapsner]

Im letzten Schritt darfst du nicht allen arcs den gleichen arc zuweisen, sondern musst die getrenn voneinenander durchlaufen und jeweils einen separaten arc erzeugen und zuweisen.