在 d3 arc javascript 中绘制文本
Posted
技术标签:
【中文标题】在 d3 arc javascript 中绘制文本【英文标题】:draw text in d3 arc javascript 【发布时间】:2012-12-03 22:08:23 【问题描述】:我在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/ 的目标:
【问题讨论】:
【参考方案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")
我听到您对两组矩形数据的看法,但有一种方法可以将您的数据集组合成一个数据集,并在必要时添加零以使其成为正方形。如果你能做到这一点,你的任务会简单得多,所以如果你还没有,那么值得进行一些调查。也许将其作为问题发布?
【讨论】:
您只添加了一个文本,但我需要绘制 n 个文本。所以要么我需要把这条弧线分成n条弧线,要么把n个点放在我要画n个标签的地方 我也很乐意解决完整的自动生成问题,但正如我上面所说的;我的观点是,自动生成弧线和和弦的最有效解决方案是将两个矩阵合二为一;其他任何东西都无法充分发挥 D3 的潜力,并涉及大量冗余代码……我不想写这些。如果您发布源数据,我(或其他人)可以为您查看。以上是关于在 d3 arc javascript 中绘制文本的主要内容,如果未能解决你的问题,请参考以下文章