我在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
个节点)。我不能直接使用和弦布局,因为我没有方形矩阵。我的桌子是长方形的,有一个lhs和一个以上的rhs。因此,我会为一个rhs和一个大半球拿一个小半球作为lhs。
我也很困惑如何在这里绘制两个节点之间的连接。没有任何线索
我希望实现http://bost.ocks.org/mike/uberdata/:
之类的功能
答案 0 :(得分:15)
沿曲线定位文本的技巧是将文本(和文本路径)元素附加到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", arc)
.attr("id", "path1")
.attr("transform", "translate(200,200)")
.attr("fill","#ccf")
我听到你对两组矩形数据的看法,但是有可能将数据集合并为一个,并在必要时添加零以使其成为正方形。如果你能做到这一点,你的任务将变得更加简单,所以如果你还没有,那么值得进行一些调查。也许将其作为一个问题发布?