var w = 2000, h = 2000, format = d3.format(",d"); var pack = d3.layout.pack() .size([w-100, h-100]) .value(function(d) { return d.size; }); var vis = d3.select("#chart").append("svg:svg") .attr("width", w) .attr("height", h) .attr("class", "pack") .append("svg:g") .attr("transform", "translate(2, 2)"); d3.json("SSTcirclePack.json", function(json) { var node = vis.data([json]).selectAll("g.node") .data(pack.nodes) .enter().append("svg:g") .attr("class", function(d) { return d.children ? "node" : "leaf node"; }) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); node.append("svg:circle") .attr("r", function(d) { return d.r ; }) .attr("fill", "#bcbd22") .attr("fill-opacity", 0) .attr("class", function(d) { return d.class; }); //.on('mouseover', d3.select(this).datum()); node.filter(function(d) { return d.name === "Student Services Technology"; }).append("svg:text") .attr("transform", function(d) { return "translate(" + (d.r * .1) + "," + (-d.r * .80) + ")"; }) .attr("class", function(d) { return d.class; }) .text(function(d) { return d.name.substring(0, d.r / 3); }); node.filter(function(d) { return d.name === "Student Services Technology"; }).append("svg:text") .attr("transform", function(d) { return "translate(" + (d.r * .1) + "," + (-d.r * .76) + ")"; }) .attr("class", "SST-2") .text("Functions and their related Systems"); node.append("svg:title") //.text(function(d) { return d.class + " :: " + d.name + ": " + format(d.size / 100); }); .text(function(d) { return d.class + " :: " + d.name + (d.children ? "" : ": $" + format(d.size)); }); node.filter(function(d) { return !d.children; }).append("svg:text") .attr("text-anchor", "middle") .attr("dy", ".3em") .attr("stroke", "#FFFFFF") .text(function(d) { return d.name.substring(0, d.r / 3); }); node.filter(function(d) { return d.class.substring(d.class.length-1, d.class.length) === "2"; }).append("svg:text") .attr("text-anchor", "start") .attr("dy", ".3em") .attr("transform", function(d) { return "translate(" + (-d.r ) + "," + (d.r * .75 ) + ")"; }) .attr("class", "function-2") .text(function(d) { return d.name; }); node.filter(function(d) { return d.class.substring(d.class.length-1, d.class.length) === "1"; }).append("svg:text") .attr("text-anchor", "start") .attr("dy", ".3em") .attr("transform", function(d) { return "translate(" + (-d.r / 3 ) + "," + (-d.r / 1.1) + ")"; }) .attr("class", function(d) { return "label-" + d.class; }) .text(function(d) { return d.name; }); // /* node.filter(function(d) { return d.children; }).append("svg:text") .attr("text-anchor", "middle") .attr("dy", ".3em") .attr("class", "labels") .attr("transform", function(d) { return "translate(" + (d.x - d.r) + "," + (d.y - d.r) + ")"; }) .text(function(d) { return d.name; }); */ /* d3.selectAll("circle").filter(function(d) { return d.class.substring(d.class.indexOf("-") + 1, 1) === "1"; }).append("svg:text") .attr("text-anchor", "end") .attr("dy", ".3em") .text(function(d) { return d.name.substring(0, d.r / 3); }); node.filter(function(d) { return d.class.substring(d.class.indexOf("-") + 1, 1) == 1; }).append("svg:text") .attr("text-anchor", "end") .attr("dy", ".3em") .text(function(d) { return d.name.substring(0, d.r / 3); }); */ //if you do have children, offset your text abit });