draw text in d3 arc javascript

Question

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()
    .in         


        

Answer 1

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?