小编Jon*_*rut的帖子

在没有通常的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.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]; });
Run Code Online (Sandbox Code Playgroud)

我试图改编的那个使用"text"和"textPath",我似乎无法简单地添加转换/旋转属性.添加此行

.attr("transform",function(d,i){return "rotate(90)";})
Run Code Online (Sandbox Code Playgroud)

到下面的代码什么都不做:

   // Add a text label.
        var groupText …
Run Code Online (Sandbox Code Playgroud)

label d3.js chord-diagram

5
推荐指数
1
解决办法
2357
查看次数

标签 统计

chord-diagram ×1

d3.js ×1

label ×1