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ノードに分散します)。正方行列を持っていないため、コード レイアウトを直接使用することはできません。私のテーブルは長方形で、左が 1 つ、右が複数あります。したがって、1 つの rhs には 1 つの小さな半球を使用し、lhs には 1 つの大きな半球を使用します。

また、ここで 2 つのノード間の接続を描画する方法もわかりません。何の手がかりも得られない

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 パスから生成され、各パスは 2 つの円弧と 2 つのベジェ曲線で構成されます。適切な入力を提供できる場合、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")​

2 セットの長方形のデータについてあなたが言っていることを聞きましたが、データセットを 1 つに結合し、必要に応じてゼロを追加して正方形にする方法がある可能性があります。それができれば、タスクははるかに簡単になるので、まだ調査していない場合は、少し調査する価値があります。多分それを質問として投稿しますか？

于 2012-12-16T21:20:24.003 に答える