Javascript 圆木标签被剪掉了

标签被剪掉了

试图增加或减少defaultValue和diameterValue

变量直径=chart.number（）
.标题（“半径”） .defaultValue（1000） .fitToWidth（正确）

图表绘制（功能（选择、数据）{

var g=selection
.attr（“宽度”，1200）
.attr（“高度”，1200）
.附加（“g”）
.attr（“转换”、“转换”（+1200/2+）、“+1200/2+”）；
var cluster=d3.layout.cluster（）
.尺寸（[3601200/2-60]）；
var diagonal=d3.svg.diagonal.radial（）
.投影（函数（d）{return[d.y，d.x/180*Math.PI]；}）；
var节点=cluster.nodes（数据）；
var link=g.selectAll（“path.link”）
.数据（群集.链接（节点））
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.style（“填充”、“无”）
.风格（“笔划”、“中交”）
.style（“笔划宽度”、“1px”）
.attr（“d”，对角线）；
变量节点=g.selectAll（“g.node”）
.数据（节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return”旋转（“+（d.x-90）+”）平移（“+d.y+”）”）；}）；
node.append（“圆”）
.attr（“r”，7）
.style（“填充”、“eeeeee”）
.style（“笔划”，“#99999”）
.样式（“笔划宽度”、“2px”）；
node.append（“文本”）
.attr（“dy”，“.31em”）
.attr（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.attr（“transform”，函数（d）{返回d.x<180？“translate（8）”：“rotate（180）translate（-8）”；}）
.text（函数（d）{返回d.name；}）
.style（“字体大小”，“11px”）
.style（“字体系列”、“Arial、Helvetica”）

})})（）

---

标签不应该被剪掉。图形应该能够指定圆周围的边距。

使用边距，即高度、宽度和平移，可以解决此问题。

---

示例：如果高度和宽度为1200，则使用（800800）进行翻译。

请检查它们是否未被SVG元素边界切割

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