在 d3 arc javascript 中绘制文本 [英] draw text in d3 arc javascript

问题描述

我在 http://jsfiddle.net/PRb93/1/

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.

Now I want to draw texts on top of this arc (I'll distribute this arc into n nodes). 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.

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

also I am puzzled how to draw the connections between two nodes here. not getting any clue

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

推荐答案

沿曲线定位文本的技巧是将一个文本(和文本路径)元素附加到 SVG 并赋予它一个指向 ID 的 xlink:href 属性的一个弧.请参阅下面的示例.

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.

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 布局将为您生成这些.如果您将数据集分开，您可能需要手动创建每个和弦路径.

​ 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.

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?

这篇关于在 d3 arc javascript 中绘制文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！