Question

我目前正在处理以下d3 example，我想在弧内放置文字，类似于this example。但是，每当我尝试将文本附加到任何内容时，文本就不会显示。我查看了开发人员控制台，它似乎在那里，但它不会在屏幕上直观显示。我使用了第一个示例中提供的所有代码，除了我尝试添加以下arc元素：

("the d3 element").enter().append("svg:text").text("???")

("the d3 element").enter().append("text").text("???")

("the d3 element").append("svg:text").text("???")

("the d3 element").append("text").text("???")

除了切断一些样式更改之外，似乎无论我在哪里放置任何此代码，它都不想为我工作。我很感激和帮助！

Answer 1

＆＃34;每当我尝试将文本附加到任何内容时，文本都不显示＆＃34;：文本无法附加到大多数svg元素。您可以将文字附加到svg本身或g，但不能将其附加到path，rect，circle等。

处理此问题的最常用方法之一是使用g元素在将数据绑定到g时放置形状和文本。在g上使用变换将转换形状和文本 - 非常适合圆形和矩形等。

您可以使用其他几种方法来覆盖svg元素上的文本：

使用元素的定位属性来设置文本的x和y属性，以便您可以将文本放在元素的顶部。
使用path作为文本路径放置文本（如示例所示）
使用实用方法，例如质心（例如弧形或地理坐标）
使用此信息查找元素的边界框并放置元素。

这些选项有助于放置，但不会确保文本落在形状的范围内 - 这是不同的复杂功能。

对于弧，一个选项是使用圆形路径作为文本路径，其中圆的半径介于弧的内半径和外半径之间 - 然后使用反映起始角的文本偏移放置文本 - 或为每段文字制作弧形。一般机制如下所示（注意它不能使用圆形元素，因为svg textPaths必须遵循路径）：

＆＃13;

var svg=d3.select("body")
  .append("svg")
  .attr("height",400)
  .attr("width",400)
  .attr("transform","translate(200,200)")
  
var arc = d3.arc()
  .innerRadius(50)
  .outerRadius(100)
  .startAngle(0)
  .endAngle(2);
  
var arcText = d3.arc()
  .innerRadius(75)
  .outerRadius(75)
  .startAngle(0)
  .endAngle(2);
  
var arc = svg.append("path")
  .attr("d",arc)
  .attr("fill","steelblue")
  
var textPath = svg.append("path")
  .attr("d",arcText)
  .attr("id","textpath")
  .attr("fill","none")
  .attr("stroke","black");
  
var text = svg.append("text")
  .append("textPath")
  .attr("xlink:href","#textpath")
  .text("title")
  .attr("startOffset", "25%")  // the bottom of the arc is from 50%-100%, the top from 0 to 50%
  .style("text-anchor","middle")

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

＆＃13;

上述机制与您链接的示例非常相似 - 它使用弧作为文本路径附加文本。您引用的示例使用可见弧（圆环）段自身的文本路径 - 并偏移x，y位置以将文本移动到弧本身（而不是弧形）。

请注意，我使用的是v4，而不是链接示例中的v3。

在D3中，如何将文本放在已经附加文本的形状中？

1 个答案: