我在使用 d3.js 时遇到了这个问题:我想将文本放在圆弧上。现在我使用的是textPath，效果是这样的:
有没有办法旋转textPath？我想要获得这样的效果:
这是我的代码:
path.attr("d",d3.arc()
.innerRadius(5)
.outerRadius(55)
.startAngle(Math.PI/2+angle-10 * (Math.PI / 180)) //converting from degs to radians
.endAngle(Math.PI/2+angle+10*(Math.PI/180)))
.attr("transform", function(d){return "translate("+d.x+","+d.y+") rotate("+nodesMap.get(node.id).degPathRotate+")"; })
.attr("fill", function(d) { return "red"; })
.attr("opacity", 0.8)
invisibleMap.get(node.id).angle = angle;
vis.append("text")
.append("textPath") //append a textPath to the text element
.attr("xlink:href", "#"+'p'+node.id) //place the ID of the path here
.text((nodesMap.get(node.id).totRels-nodesMap.get(node.id).shownRels))
最佳答案
我不会为此使用 textPath 。相反，我只是使用一点三 Angular 函数显式放置文本:
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
text {
font-family: arial;
font-weight: bold;
}
</style>
</head>
<body>
<svg width="200" height="200"></svg>
<script>
var vis = d3.select('svg'),
path = vis.append('path'),
angle = 330,
xPos = 100,
yPos = 100,
innerR = 5,
outerR = 55;
path
.attr('id', 'sp')
.attr(
'd',
d3
.arc()
.innerRadius(innerR)
.outerRadius(outerR)
.startAngle(Math.PI / 2 + angle - 10 * (Math.PI / 180)) //converting from degs to radians
.endAngle(Math.PI / 2 + angle + 10 * (Math.PI / 180))
)
.attr('transform', function (d) {
return (
'translate(' +
xPos +
',' +
yPos +
') rotate(' +
30 +
')'
);
})
.attr('fill', function (d) {
return 'red';
})
.attr('opacity', 0.8);
vis
.append('text')
.text(20)
//.append('textPath') //append a textPath to the text element
//.attr('xlink:href', '#' + 'sp') //place the ID of the path here
.attr("transform", function(){
let l = outerR - innerR,
x = (l * Math.cos(angle)) + xPos,
y = (l * Math.sin(angle)) + yPos,
bbox = this.getBBox();
return "translate(" + x + "," + (y - bbox.height) + ")";
})
</script>
</body>
</html>关于javascript - 如何在路径 d3.js 上放置文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65646137/