我在
http://jsfiddle.net/PRb93/1/创建了一个弧d3
var vis = d3.select("body").append("svg")
var pi = Math.PI;
var arc = d3.svg.arc()
.innerRadius(300)
.outerRadius(320)
.startAngle(0 * (pi/180))
.endAngle(-pi)
vis.append("path")
.attr("d",arc)
.attr("transform","translate(350,350)")
现在我想在这个弧顶上绘制文本(我将这个弧分配到n个节点).我不能直接使用和弦布局,因为我没有方阵.我的桌子是矩形的,有一个lss和一个以上的rhs.所以我会拿一个小半球一个rhs和一个大半球为lhs.
我也很困惑,如何绘制这两个节点之间的连接.没有任何线索
我想要实现像http://bost.ocks.org/mike/uberdata/这样的东西：
解决方法
将文本沿曲线定位的技巧是将文本(和文本路径)元素附加到SVG,并为其指定一个指向弧的ID的xlink：href属性.见下面的例子.
var svg = d3.select("body").append("svg"),pi = Math.PI;
var arc = d3.svg.arc()
.innerRadius(150)
.outerRadius(180)
.startAngle(0)
.endAngle(-pi/2)
var path = svg.append("path")
.attr("d",arc)
.attr("id","path1")
.attr("transform","translate(200,200)")
.attr("fill","#ccf")
// Add a text label.
var text = svg.append("text")
.attr("x",6)
.attr("dy",15);
text.append("textPath")
.attr("stroke","black")
.attr("xlink:href","#path1")
.text("abc");
和弦由SVG路径生成,每个轨道由两个弧和两个贝塞尔曲线组成.如果您可以为其提供适当的输入,Chord布局将为您生成.如果将数据集分开,您可能需要手动创建每个和弦路径.
var svg = d3.select("body").append("svg")
var pi = Math.PI;
var arc = d3.svg.chord()
.source({startAngle:0.1,endAngle:0.2})
.target({startAngle:0.6,endAngle:0.8})
.radius(100)
var path = svg.append("path")
.attr("d","#ccf")
我听说你对两组矩形数据的看法,但是有可能会将你的数据集合在一起,如果需要,可以添加零.如果你能做到这一点,你的任务会变得简单得多,所以如果你还没有这样的话,那么值得一些调查.也许发布它作为一个问题？
