在 d3 arc javascript 中绘制文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13903548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
draw text in d3 arc javascript
提问by Dipro Sen
I have created an arc with d3 on http://jsfiddle.net/PRb93/1/
我在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)")?
Now I want to draw texts on top of this arc (I'll distribute this arc into nnodes). I cannot use chord layout directly because I don't have a square matrix. My table is rectangular and there is one lhs and more than one rhs. So I'll take one small hemisphere for one rhs and one big hemisphere for lhs.
现在我想在这个弧的顶部绘制文本（我将这个弧分布到n节点中）。我不能直接使用和弦布局，因为我没有方阵。我的桌子是长方形的，有一个 lhs 和多个 rhs。所以我将一个小半球作为一个rhs，一个大半球作为lhs。
also I am puzzled how to draw the connections between two nodes here. not getting any clue
我也很困惑如何在这里绘制两个节点之间的连接。没有得到任何线索
I want to achieve something like http://bost.ocks.org/mike/uberdata/:
我想实现类似http://bost.ocks.org/mike/uberdata/ 的东西：
回答by Richard Marr
The trick to positioning text along a curve is to attach a text (and textpath) element to SVG and give it an xlink:href attribute that points to the ID of an arc. See below for an example.
沿曲线定位文本的技巧是将文本（和文本路径）元素附加到 SVG 并为其指定一个 xlink:href 属性，该属性指向弧的 ID。请参阅下面的示例。
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");
? Chords are generated from SVG paths, each one comprising of two arcs and two bezier curves. The Chord layout will generate these for you if you can provide it with the appropriate input. If you keep your datasets separate you might need to manually create each chord path.
? 和弦由 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")?
I hear what you're saying about two sets of rectangular data, but it's possible there's a way to combine your datasets into one, and add zeros if necessary to make it square. Your task will be much simpler if you can do that so it's worth a bit of investigation if you haven't already. Maybe post it as a question?
我听到了您对两组矩形数据的看法，但有一种方法可以将您的数据集合并为一个，并在必要时添加零以使其成为正方形。如果您可以这样做，您的任务会简单得多，因此如果您还没有进行调查，那么值得进行一些调查。也许将其作为问题发布？
