我希望我的文本标签分为两行。例如，名称：
“主题 A
描述”，第一行“主题 A”，第二行“描述”。
我知道您可以使用 .html() 作为普通文本元素来插入 HTML 代码。
d3.select(#ID)
.append("div")
.html("Topic A <br> Description)
但是同样不适用于 TextPath。
d3.select(#ID)
.append("text")
.append("textPath")
.html("Topic A <br> Description)
是否可以为 TextPath 元素插入 HTML 代码？ 或者有人知道如何将 TextPath 元素的文本拆分为 2 行吗？
有人可以帮我吗？
如果有任何建议，我将非常感激！
亲切的问候杰戈尔
const data1 = {
"name": "TOPICS",
"id": 1,
"children": [{
"name": "Topic A <br> Description",
"id": 2,
"size": 2
}, {
"name": "Topic B",
"id": 3,
"size": 3
}, {
"name": "Topic C",
"id": 4,
"size": 4
}]
};
//-------------------------------------------------------------------------------------------
// Declare variables
let i_region_static_id = "sunburst",
parentDiv = document.getElementById(i_region_static_id),
width = parentDiv.clientWidth,
height = 450,
root,
rootDepth,
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)))
//-----------------------------------------------------------------------------------
const middleArcLine = d => {
const halfPi = Math.PI / 2;
const angles = [x(d.x0) - halfPi, x(d.x1) - halfPi];
const r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);
const middleAngle = (angles[1] + angles[0]) / 2;
const invertDirection = middleAngle > 0 && middleAngle < Math.PI; // On lower quadrants write text ccw
if (invertDirection) {
angles.reverse();
}
const path = d3.path();
path.arc(0, 0, r, angles[0], angles[1], invertDirection);
return path.toString();
}
//-------------------------------------------------------------------------------------------
// Initialize and Update sun
function updateSun(pData) {
const valueAccessor = (d) => d.size;
root = d3.hierarchy(pData); //set data
valueAccessor == null ? root.count() : root.sum((d) => Math.max(0, valueAccessor(d)));
// Sortiert 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
.each(function(d, i) {
// Append main-arc
d3.select(this).append('path')
.attr('class', 'main-arc')
.attr('d', arc)
.style('fill', d => (d.data.color == undefined) ? color((d.children ? d : d.parent).data.name) : d.data.color)
// Append hidden-arc
d3.select(this).append('path')
.attr('class', 'hidden-arc')
.attr('d', middleArcLine)
.attr('id', 'hiddenArc' + i)
// setCurrent // New Line Added
// Append text
d3.select(this).append('text')
// Append textPath for Textstring
.append('textPath')
.attr('startOffset', '50%')
.attr('fill', d => 'black')
.attr('xlink:href', '#hiddenArc' + i)
.text(d => d.data.name);
})
}
updateSun(data1) .slice {
cursor: pointer;
}
.slice .main-arc {
stroke: #fff;
stroke-width: 1px;
}
.slice .hidden-arc {
fill: none;
}
.slice text {
pointer-events: none;
text-anchor: middle;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Sunbrust </title>
</head>
<body>
<div id="sunburst"></div>
<script src="https://d3js.org/d3.v7.js" charset="utf-8"></script>
</script>
</body>
</html>在这篇post的帮助下，我找到了一种解决方案来换行我的文本。我已经更新了上面的代码。