Circular dendrogam label gets cut off

Question

Labels are getting cut.

tried to increase or decrease the defaultValue and diameterValue

var diameter = chart.number ()
.title("Radius") .defaultValue(1000) .fitToWidth(true)

chart.draw(function (selection, data){

var g = selection
    .attr("width", 1200)
    .attr("height", 1200)
    .append("g")
    .attr("transform", "translate(" + 1200/2 + "," + 1200/2 + ")");

var cluster = d3.layout.cluster()
    .size([360, 1200/2 - 60]);

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var nodes = cluster.nodes(data);

var link = g.selectAll("path.link")
    .data(cluster.links(nodes))
    .enter().append("path")
    .attr("class", "link")
    .style("fill","none")
    .style("stroke","#cccccc")
    .style("stroke-width","1px")
    .attr("d", diagonal);

var node = g.selectAll("g.node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });

node.append("circle")
    .attr("r", 7)
    .style("fill", "#eeeeee")
    .style("stroke","#999999")
    .style("stroke-width","2px");

node.append("text")
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
    .text(function(d) { return d.name; })
    .style("font-size","11px")
    .style("font-family","Arial, Helvetica")

})})();

The label shouldn't get cut off - Dendrograph . The graph should offer the ability to specify a margin around the circle or so.

Answer 1

Playing with the margins ie height and width and translation solves this problem. example: if height and width is 1200 then translate it with (800,800)