Диаграмма D3.JS Замените существующий кусочек на несколько подкладок ⇐ Javascript

[Anonymous]

Я пытаюсь создать круговую диаграмму с помощью D3JS. Когда вы нажимаете на срез, Ajax отправляется на сервер и извлекает детей среза. У детей всегда есть значение, которое сумма является значением родителя. Я мог бы использовать увеличение солнечного луча, но я хочу, чтобы только один уровень был видимым во все времена, который для меня скорее круговой диаграммы, чем солнцезащитный. ломтик со своими детьми (возвращенный Ajax) и оживлял пирог, чтобы родители полностью разжигались (со значением нуля), а дети занимают весь пирог и заменяют родителей (которые удаляются из ДАННЫЕ). Имейте следующий код, который иллюстрирует проблему:
https://codepen.io/jberli/pen/jeornjq
и здесь, часть JavaScript part of Codepen:
// The current slices of the pie
var parents = [
// Only parent1 have children
{ 'name': 'parent1', 'value': 50 },
{ 'name': 'parent2', 'value': 20 },
{ 'name': 'parent3', 'value': 80 },
{ 'name': 'parent4', 'value': 40 },
]

// Those are the children of the parent1
var children = [
{ 'name': 'children1', 'value': 10 },
{ 'name': 'children2', 'value': 5 },
{ 'name': 'children3', 'value': 20 },
{ 'name': 'children4', 'value': 15 },
]

var data = parents;
data.sort((a, b) => b.value - a.value);

var container = document.getElementById('chart');

const width = container.offsetWidth;
const height = width;
const outer = height / 2;
const inner = outer * .5;
const radius = width / 4;
const tau = 2 * Math.PI;

const color1 = d3.color("hsl(0, 45%, 55%)");
const color2 = d3.color("hsl(360, 45%, 55%)");
const interpolation = d3.interpolateHslLong(color1, color2);

var color = d3.scaleOrdinal(d3.quantize(interpolation, data.length + 1));
var svg = d3.create("svg").attr("viewBox", [-width/2, -height/2, width, height]);
var arc = d3.arc().innerRadius(inner).outerRadius(outer);

// Create the pie chart
var pie = d3.pie().value((d) => d["value"]);

const path = svg.datum(data).selectAll("path")
.data(pie)
.join("path")
.attr("fill", (d, i) => color(i))
.attr("d", arc)
.style("cursor", "pointer")
.each(function(d) { this._current = d; })
.on("click", (e, d) => {
// Check if parent1 is clicked
if (d.data.name === 'parent1') {
// Set children as current data
data = children;
// Sort the data by value
data.sort((a, b) => b.value - a.value);
// Recalculate the color scale
color = d3.scaleOrdinal(d3.quantize(interpolation, data.length + 1));

// NEED TO REPLACE THE CLICKED SLICE WITH ITS CHILDREN
// THEN ANIMATE THE PIE FOR THE CHILDREN TO GROW
// WHILE PARENTS ARE SQUISHED (VALUE TO 0) AND REMOVED FROM THE DATA
}
})

container.append(svg.node());


Подробнее здесь: https://stackoverflow.com/questions/794 ... -subslices