在没有通常的svg：text的情况下,在d3.js和弦图中旋转文本路径

概述我试图通过Mike Bostock调整这个和弦图： 我希望文本标签像这个和弦图一样向外旋转： http://bost.ocks.org/mike/uberdata/ 这里有一个例子 http://bl.ocks.org/mbostock/910126 但是,转换是使用svg：text完成的： g.append("svg:text") .each(function(d) { d.angl 我试图通过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",i) { return "#group" + i; })           .text(function(d,i) { return citIEs[i].country; });

任何想法如何向外旋转文本,以便较小的和弦组文本标签可以显示而不会被揉成一团或完全关闭(原始解决方案)？

解决方法 我想你正在寻找 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",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; });

总结

以上是内存溢出为你收集整理的在没有通常的svg：text的情况下,在d3.js和弦图中旋转文本路径全部内容，希望文章能够帮你解决在没有通常的svg：text的情况下,在d3.js和弦图中旋转文本路径所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。