10

我在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。所以我将一个小半球作为一个右半球，一个大半球作为左半球。

我也很困惑如何在这里绘制两个节点之间的连接。没有任何线索

我想实现类似http://bost.ocks.org/mike/uberdata/的东西：

在此处输入图像描述

4

1 回答 1

17

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

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

于 2012-12-16T21:20:24.003 回答