When I update my data source, the transition only works for the deleted elements, but not for the updated elements.
I have inserted a .transition() in the “deleted section” and in the “update section”. I suspect that the transition() function in my update section is being used incorrectly.
No error is displayed, which could help me to solve the problem.
Can someone please help me?
// Data
const data1 = {
"name": "TOPICS",
"id": 1,
"children": [{
"name": "Topic A",
"id": 2,
"children": [{
"name": "Sub A1",
"id": 5,
"size": 4
}, {
"name": "Sub A2",
"id": 6,
"size": 4
}]
}, {
"name": "Topic B",
"id": 3,
"children": [{
"name": "Sub B1",
"id": 7,
"size": 3
}, {
"name": "Sub B2",
"id": 8,
"size": 3
}, {
"name": "Sub B3",
"id": 9,
"size": 3
}]
}, {
"name": "Topic C",
"id": 4,
"children": [{
"name": "Sub A3",
"id": 10,
"size": 4
}, {
"name": "Sub A4",
"id": 11,
"size": 4
}]
}]
};
const data2 = {
"name": "TOPICS",
"id": 1,
"children": [{
"name": "Topic A",
"id": 2,
"children": [{
"name": "Sub A1",
"id": 5,
"size": 4
}, {
"name": "Sub A2",
"id": 6,
"size": 4
}]
}, {
"name": "Topic B",
"id": 3,
"children": [{
"name": "Sub B1",
"id": 7,
"size": 3
}, {
"name": "Sub B2",
"id": 8,
"size": 3
}, {
"name": "Sub B3",
"id": 9,
"size": 3
}]
}]
};
//-------------------------------------------------------------------------------------------
// Declare variables
let i_region_static_id = "sunburst",
parentDiv = document.getElementById(i_region_static_id),
width = parentDiv.clientWidth,
height = 450,
root,
x,
y,
color = d3.scaleOrdinal(d3.schemeCategory10);
maxRadius = (Math.min(width, height) / 2) - 5;
const partition = d3.partition();
//-----------------------------------------------------------------------------------
// SVG-Element
let svg = d3.select('#' + i_region_static_id).append('svg')
.style('width', width)
.style('height', height)
.attr('viewBox', `${-width / 2} ${-height / 2} ${width} ${height}`)
//-----------------------------------------------------------------------------------
// X-Scale
x = d3.scaleLinear()
.range([0, 2 * Math.PI])
.clamp(true);
//-----------------------------------------------------------------------------------
// Y-Scale
y = d3.scaleSqrt()
.range([maxRadius * .1, maxRadius]);
//-----------------------------------------------------------------------------------
// Create Arc generator
const arc = d3.arc()
.startAngle(d => x(d.x0))
.endAngle(d => x(d.x1))
.innerRadius(d => Math.max(0, y(d.y0)))
.outerRadius(d => Math.max(0, y(d.y1)))
//-------------------------------------------------------------------------------------------
// Initialize and Update sun
function update_sun(pData) {
const valueAccessor = (d) => d.size;
root = d3.hierarchy(pData); //set data
valueAccessor == null ? root.count() : root.sum((d) => Math.max(0, valueAccessor(d)));
// Sort Nodes
root.sort((d) => d3.descending(d.value))
const slice = svg.selectAll('g.slice')
.data(
partition(root).descendants(),
function(d) { return d.data.id; }
);
//-------------------------------------------------------------------------------------------
// Enter Section
const newSlice = slice.enter()
.append('g').attr('class', 'slice')
.attr('display', d => d.depth < 2 ? null : 'none') // Hide levels lower depth
newSlice.append('path')
.attr('class', 'main-arc')
.style('fill', d => (d.data.color == undefined) ? color((d.children ? d : d.parent).data.name) : d.data.color) //set source color, otherwise default color
.attr('d', arc);
// Update Section
slice.select('path')
.style('fill', d => (d.data.color == undefined) ? color((d.children ? d : d.parent).data.name) : d.data.color)
.each(function(d) {
this.x0 = d.x;
this.dx0 = d.dx;
})
.transition().duration(1000)
.attrTween("d", function(d) { return function() { return arc(d); }; })
// Delete Section
slice.exit().transition().duration(500).style("fill-opacity", 0.2).remove();
}
//-------------------------------------------------------------------------------------------
update_sun(data1)
let i = 0;
d3.interval(() => {
if (i++ % 2 === 0) {
console.log("data2")
update_sun(data2);
} else {
console.log("data1")
update_sun(data1);
}
}, 4000).slice .main-arc {
stroke: #fff;
stroke-width: 1px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="sun.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="sunburst"></div>
<script src="https://d3js.org/d3.v7.js" charset="utf-8"></script>
</body>
</html>