gpt4 book ai didi

javascript - 在 d3 arc javascript 中绘制文本

转载 作者:可可西里 更新时间:2023-11-01 02:36:30 25 4
gpt4 key购买 nike

我在 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 个节点中)。我不能直接使用和弦布局,因为我没有方阵。我的 table 是长方形的,有一张左手和一张右手。所以我将一个小半球用于一个 rhs,一个大半球用于 lhs。

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

我想实现类似 http://bost.ocks.org/mike/uberdata/ 的目标:

enter image description here

最佳答案

沿曲线定位文本的技巧是将文本(和文本路径)元素附加到 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 布局提供适当的输入,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")​

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

关于javascript - 在 d3 arc javascript 中绘制文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13903548/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com