当我更新数据源时，转换仅适用于已删除的元素，但不适用于更新的元素。
我在“已删除部分”和“更新部分”中插入了
.transition()transition()没有显示错误，这可以帮助我解决问题。
有人可以帮助我吗？
// 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; }
);
//-------------------------------------------------------------------------------------------
// Update Section
const newSlice = slice.enter() //rect_node_grp
.append('g').attr('class', 'slice')
.attr('display', d => d.depth < 2 ? null : 'none') // Hide levels lower depth
.each(function(d) { this._current = d; })
.each(function(d) {
//Append Elemente an g
d3.select(this).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);
})
.merge(slice)
.each(function(d) {
// Update meine Elemente in g tag
d3.select(this).select('path')
.attr('class', 'main-arc')
.transition()
.delay(100)
.attr('d', arc);
// .attrTween("d", arcTween)
})
// 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>我重写了代码，现在过渡也适用于更新的元素。但现在我又不断收到以下错误。上面的代码已更新。
"<path> attribute d: Expected arc flag ('0' or '1'),"....666,183.666,0,0.848809031933986..."
这个错误是什么意思？