labeldChords

HTML

<!DOCTYPE html>


    <title>Test Labeling of Chord arches</title>

  
  <body>
      <p>This is a test of adding lables to the group arc directly</p>
      <script src="http://d3js.org/colorbrewer.v1.min.js"></script>
  <script src="app.js"></script>
</body>

CSS

body {
  font: 12px sans-serif;
}

JavaScript

var width = 960,
    height = 960,
    innerRadius = Math.min(width, height) * 0.28,
    outerRadius = innerRadius * 1.1;
// need to adjust this for colours
var fill = d3.scale.ordinal();   //sqrt()


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var matrix=[
    [0,343],
    [0,0]];

var enr=[
	[],
    ["annotation1","annotation2","annotation3","annotation4","annotation5","annotation6"],
    ["annotation1"]];

var chord = d3.layout.chord()
    .padding(0.05)
    .sortSubgroups(d3.descending)
    .matrix(matrix);



var numEnr = enr.map(function(d) {
		return d.length;
	});

fill.domain(numEnr.sort(function(a,b){return a-b;}));
    colourBlue=colorbrewer.Blues[8];
	colourRed=colorbrewer.Reds[8];
	colourBlue.splice(0,2);
	colourRed.splice(0,2);
	colourArray=colourBlue.reverse().concat(colourRed);
fill.range(colourArray);


var cGroup = svg.selectAll("path")
    .data(chord.groups)
  .enter().append("path")
    .style("fill", function(d) { return fill(enr[d.index].length); })
    .style("stroke", "black") 
    .style("opacity",0.5)
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
    .attr("class","arc")
    .attr("id",function(d,i){return "group"+i;});
    

cGroup.append("text")
    .attr("x", 0)
    .attr("dy", 15)
  .append("textPath")
    .attr("class", "textPath")
    .attr("xlink:href", function(d) { 
        return "#group" + d.index; })
    .text(function(d) { 
        modnum=d.index+1;
        return "Module "+modnum+"A"; });


svg.append("g")
    .attr("class", "chord")
  .selectAll("path")
    .data(chord.chords)
  .enter().append("path")
    .attr("d", d3.svg.chord().radius(innerRadius))
    .style("fill", "silver")
    .style("stroke","black")
    .style("opacity", 0.7);