在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")​

我聽到你對兩組矩形數據的看法，但是有可能將數據集合並為一個，並在必要時添加零以使其成為正方形。 如果你能做到這一點，你的任務將變得更加簡單，所以如果你還沒有，那么值得進行一些調查。 也許發布它作為一個問題？