在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 ，translate（350,350））
  

现在我想在这个弧的顶部绘制文本我将这个弧分配到 n 节点）。我不能直接使用和弦布局，因为我没有方矩阵。我的桌子是长方形，有一个lhs和一个以上的rhs。因此，我将为一个rhs和一个大半球采取一个小半球为lhs。

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

我想实现像 http://bost.ocks.org/mike/uberdata/ ：

解决方案

沿着曲线定位文本的诀窍是将一个文本（和textpath）元素附加到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 path1）
 .attr（transform，translate（200,200））
 .attr（fill，＃ccf）
 
 //文本标签。 
 var text = svg.append（text）
 .attr（x，6）
 .attr（dy，15）; 
 
 text.append（textPath）
 .attr（stroke，black）
 .attr（xlink：href，＃path1）
 .text（abc）; 
 


从SVG路径生成和弦，每个路径包括两个圆弧和两个贝塞尔曲线曲线。和弦布局将为您生成这些，如果您可以为它提供适当的输入。如果您保持您的数据集分离，您可能需要手动创建每个和弦路径。

  var svg = d3.select ）.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 have created an arc with d3 on 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)")​

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

I want to achieve something like http://bost.ocks.org/mike/uberdata/ :

解决方案

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");

​ 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屋！