在d3 arc javascript中绘制文本

Question

我在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/这样的东西:

Answer 1

沿曲线定位文本的技巧是将文本(和文本路径)元素附加到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")?

我听到你对两组矩形数据的看法,但是有可能将数据集合并为一个,并在必要时添加零以使其成为正方形.如果你能做到这一点,你的任务将变得更加简单,所以如果你还没有,那么值得进行一些调查.也许发布它作为一个问题？