弧外標簽的線條（餅圖）d3.js

Question

我是 D3js 的新手，想為餅圖的外部標簽添加線條。 這是代碼。 它顯示標簽，但我想用弧線連接它。

我需要像這樣，但無法產生對我的例子。

JavaScript：

 var data = [ {name: "A", val: 11975}, {name: "B", val: 5871}, {name: "C", val: 8916} ]; var w = 400, h = 400, r = Math.min(w, h) / 2, labelr = r + 30, // radius for label anchor color = d3.scale.category20(), donut = d3.layout.pie(), arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); var vis = d3.select("body") .append("svg:svg") .data([data]) .attr("width", w + 150) .attr("height", h); var arcs = vis.selectAll("g.arc") .data(donut.value(function(d) { return d.val })) .enter().append("svg:g") .attr("class", "arc") .attr("transform", "translate(" + (r + 30) + "," + r + ")"); arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc); arcs.append("svg:text") .attr("transform", function(d) { var c = arc.centroid(d), x = c[0], y = c[1], // pythagorean theorem for hypotenuse h = Math.sqrt(x*x + y*y); return "translate(" + (x/h * labelr) + ',' + (y/h * labelr) + ")"; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { // are we past the center? return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start"; }) .text(function(d, i) { return d.value.toFixed(2); });

 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script> <script src='http://mbostock.github.com/d3/d3.layout.js?2.4.6' type='text/javascript'></script> <div id="chart"></div>

Answer 1

您的代碼和您引用的代碼之間的唯一區別是甜甜圈的內半徑和外半徑與半徑的比率。 因此，您應該對計算中使用的靜態值進行一些調整以處理您的圖表。

所做的調整如下。

• 由於內半徑增加了 20，因此將 -75 更改為 +45。
• 由於外半徑增加了 50，因此將 -20 更改為 +30。

希望這可以幫助。

 var data = [ {name: "A", val: 11975}, {name: "B", val: 5871}, {name: "C", val: 8916} ]; var w = 400, h = 400, r = Math.min(w, h) / 2, labelr = r + 30, // radius for label anchor color = d3.scale.category20(), donut = d3.layout.pie(), arc = d3.svg.arc().innerRadius(r*.6).outerRadius(r); console.log(r * .6) console.log(r-100) var vis = d3.select("body") .append("svg:svg") .data([data]) .attr("width", w + 150) .attr("height", h); var arcs = vis.selectAll("g.arc") .data(donut.value(function(d) { return d.val })) .enter().append("svg:g") .attr("class", "arc") .attr("transform", "translate(" + (r + 30) + "," + r + ")"); arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc); arcs.append("text") .attr("text-anchor", "middle") .attr("x", function(d) { var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; d.cx = Math.cos(a) * (r - 45); return dx = Math.cos(a) * (r+30); }) .attr("y", function(d) { var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2; d.cy = Math.sin(a) * (r - 45); return dy = Math.sin(a) * (r+30); }) .text(function(d) { return d.value.toFixed(2); }) .each(function(d) { var bbox = this.getBBox(); d.sx = dx - bbox.width/2 - 2; d.ox = dx + bbox.width/2 + 2; d.sy = d.oy = dy + 5; }); vis.append("defs").append("marker") .attr("id", "circ") .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("refX", 3) .attr("refY", 3) .append("circle") .attr("cx", 3) .attr("cy", 3) .attr("r", 3); arcs.append("path") .attr("class", "pointer") .style("fill", "none") .style("stroke", "black") .attr("marker-end", "url(#circ)") .attr("d", function(d) { if(d.cx > d.ox) { return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; } else { return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; } });

 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script> <script src='http://mbostock.github.com/d3/d3.layout.js?2.4.6' type='text/javascript'></script> <div id="chart"></div>