我创建了一个函数,它将生成一条SVG图像,其中包含两条直线和它们之间的角度曲线。但我无法让角度标签保持在角度旁边。因为SVG元素本身已被翻转为模拟笛卡尔坐标,所以下一个需要再次颠倒翻转
代码在这里:https://jsfiddle.net/wisehog/3s0g25vc/1/
我尝试过使用变换原点,翻译和缩放。但每次角度标签结束页面。目前我尝试将变换原点设置为文本元素的x和y坐标,然后尝试对其进行变换和缩放以便翻转它:
const angleText =
area
.append('text')
.text(`${midAngleDegrees}°`)
.attr('x', `${x + (angleRadius * Math.cos(midAnglePi))}`)
.attr('y', `${y + (angleRadius * Math.sin(midAnglePi))}`)
.attr('font-size', '0.8em')
const xOrigin = $('text')[0].attributes[0].value;
const yOrigin = $('text')[0].attributes[1].value;
angleText
.attr('transform-origin', `${xOrigin} ${yOrigin}`)
.attr('transform', `translate(0 ${yOrigin-10}) scale(1, -1)`)
任何帮助或提示都将不胜感激。
答案 0 :(得分:0)
为什么不只是为标签的每个x和y坐标添加一些偏移量(例如10px):
const angleText =
area
.append('text')
.text(`${midAngleDegrees}°`)
.attr('x', `${x + (angleRadius * Math.cos(midAnglePi)) + 10}`) // 10px offset
.attr('y', `${y + (angleRadius * Math.sin(midAnglePi)) + 10}`) // the same
.attr('font-size', '0.8em')