Question

我有一个这样创建的圈子矩阵：

  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;})使文本弯曲，但是实际上什么都没有附加。这是文本部分：

      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;})

问题

有没有更容易的方法可以向每个圈子添加弯曲的文本，或者什么是明智的选择？

Answer 1

顾名思义，<textPath>必须与<path>元素一起使用。您不能将其与<circle>一起使用。如果您查看SVG specifications：

除了以直线绘制的文本外，SVG还包括沿“路径”元素的形状放置文本的功能。要指定要沿“路径”的形状呈现文本块，请将给定的文本包括在“ textPath”元素中，该元素包括“ xlink：href”属性和对“ path”元素的IRI引用。

^{注意：适用于SVG 1，有关SVG 2，请参见comment below。}

因此，您必须创建路径。您可以将圈子转换为处理d属性的路径。例如，假设您的cx = 100，cy = 100和r = 30，这就是d属性：

d = "M70,100 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0";

有一些在线资源介绍了如何基于this one来基于d，cx和cy计算r属性。

这是一个演示：

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>

圆内的简单弯曲文本

问题

1 个答案: