在没有通常的 svg:text 的 d3.js 和弦图中旋转文本路径答案

【问题标题】：Rotating text paths in d3.js chord diagram without usual svg:text在没有通常的 svg:text 的 d3.js 和弦图中旋转文本路径
【发布时间】：2013-02-17 22:02:18
【问题描述】：

我正在尝试改编 Mike Bostock 的这个和弦图：

我想让文本标签像这个和弦图一样向外旋转：

http://bost.ocks.org/mike/uberdata/

这里有一个例子

http://bl.ocks.org/mbostock/910126

但是，转换是使用 svg:text 完成的：

  g.append("svg:text")
      .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
            + "translate(" + (r0 + 26) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .text(function(d) { return nameByIndex[d.index]; });

我试图适应的那个使用“text”和“textPath”，我似乎无法简单地添加一个变换/旋转属性。添加这一行

.attr("transform",function(d,i){return "rotate(90)";})

下面的代码什么都不做：

   // Add a text label.
        var groupText = group.append("text")
            .attr("x", 6)
            .attr("dy", 15);

            groupText.append("textPath")
            .attr("xlink:href",  function(d, i) { return "#group" + i; })

           .text(function(d, i) { return cities[i].country; });

有什么想法可以向外旋转文本，以便可以显示更小的和弦组文本标签而不会被捆绑或（就像原始解决方案一样）完全关闭？

【问题讨论】：

标签： d3.js label chord-diagram

【解决方案1】：

我想你在找this example by Mike Bostock

就修改初始和弦代码而言，以下更改应该可以满足您的要求：

// Add a text label.
// var groupText = group.append("text")
//     .attr("x", 6)
//     .attr("dy", 15);

//groupText.append("textPath")
//    .attr("xlink:href", function(d, i) { return "#group" + i; })
//    .text(function(d, i) { return cities[i].name; });

// Remove the labels that don't fit. :(
//groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
//    .remove();

group.append("text")
  .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
  .attr("dy", ".35em")
  .attr("transform", function(d) {
    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
        + "translate(" + (innerRadius + 26) + ")"
        + (d.angle > Math.PI ? "rotate(180)" : "");
  })
  .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
  .text(function(d, i) { return cities[i].name; });

【讨论】：