圆内的简单弯曲文本 [英] Simple curved text within a circle
问题描述
我有一个这样创建的圈子矩阵:
I have a matrix of circles that I created like this:
var maxColumn = 6;
graphGroup.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('id', function(d,i) {return 'c'+String(i)})
.attr('cx', function(d, i) {
return (i % maxColumn) * 200
})
.attr('cy', function(d, i) {
return ~~((i / maxColumn) % maxColumn) * 180
})
.attr('r', function(d) {return rScale(d.Trust)})
.style('fill', '#003366');
然后,我想尝试在每个圆内添加弯曲文本,并在该圆上添加相应的日期.我以为我要做的就是引用一个弯曲的svg元素,使文本可以使用.attr("xlink:href",function(d,i){return "#c"+i;})
进行弯曲,但是实际上什么都没有附加.这是文本部分:
Then I wanted to try and append curved text within each circle with the date corresponding to that circle. I thought all I had to do was reference a curved svg element for the text to curve using .attr("xlink:href",function(d,i){return "#c"+i;})
but actually nothing was appended at all. Here is the text portion:
graphGroup.selectAll('text')
.data(data)
.enter()
.append("text")
.style("font-size",20)
.append("textPath")
.attr("textLength",function(d,i){return 100 ;})
.attr("xlink:href",function(d,i){return "#c"+i;})
.attr("startOffset",function(d,i){return 3/20;})
.attr("dy","-1em")
.text(function(d){return d.date;})
问题
有没有更容易的方法可以向每个圈子添加弯曲的文本,或者什么是明智的选择?
Question
Is there an easier way to add curved text to each of my circles, or what is a sensible way to proceed?
推荐答案
顾名思义,<textPath>
必须与<path>
元素一起使用.您不能将其与<circle>
一起使用.如果您查看 SVG规范:
As the name implies, a <textPath>
must be used with a <path>
element. You cannot use it with a <circle>
. If you look at the SVG specifications:
除了以直线绘制的文本外,SVG还包括沿路径"元素的形状放置文本的功能.要指定要沿路径"的形状呈现文本块,请将给定文本包含在"textPath"元素中,该元素包括"xlink:href"属性和对"path"元素的IRI引用.
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a ‘path’ element. To specify that a block of text is to be rendered along the shape of a ‘path’, include the given text within a ‘textPath’ element which includes an ‘xlink:href’ attribute with an IRI reference to a ‘path’ element.
注意:这是针对SVG 1的,对于SVG 2的,请参见因此,您必须创建路径.您可以将圈子转换为处理d
属性的路径.例如,假设您的cx = 100
,cy = 100
和r = 30
,这将是d
属性:
Therefore, you have to create paths. You can convert your circles to paths dealing with the d
attribute. For instance, supposing your cx = 100
, cy = 100
and r = 30
, this would be the d
attribute:
d = "M70,100 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0";
There are several online resources explaining how do you calculate the d
attribute based on cx
, cy
and r
, like this one.
这是一个演示:
const svg = d3.select("svg");
const circle = svg.append("path")
.style("fill", "none")
.style("stroke", "black")
.attr("d", "M70,100 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
现在您可以添加<textPath>
:
const svg = d3.select("svg");
const circle = svg.append("path")
.style("fill", "none")
.style("stroke", "black")
.attr("d", "M70,100 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0")
.attr("id", "myPath");
const textpath = svg.append("text")
.append("textPath")
.attr("xlink:href", "#myPath")
.text("Foo Bar Baz")
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
这篇关于圆内的简单弯曲文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!