如何在圓弧中繪制圓？

Question

我正在嘗試制作一個圓弧並用小圓圈填充它，但是我不能在path標簽中添加圓，我必須在圓弧內繪制10行圓，每行包含10個圓。這些圓應該像Tilford樹，訪問http://bl.ocks.org/mbostock/4063550 。 有人知道我在做什么錯嗎？ 這是我的代碼：

 var w = 1200, h = 780,
 x = d3.scale.linear().range([0, w]),
 y =  d3.scale.linear().range([0, h]);

var svgContainer = d3.select("body").append("svg").attr("width",w)
                   .attr("height", h).attr("id", "svgBody").append("g");

var svgSector = d3.svg.arc().innerRadius(100).outerRadius(200)
            .startAngle(0.5 * Math.PI ).endAngle( Math.PI );

svgContainer.append("path").attr("d", svgSector)
              .attr("transform", "translate(600,0)")
              .append("circle").attr('r', 10);

Answer 1

路徑就是路徑。 圓圈就是圓圈。 它們是單獨的SVG元素。 你不能混合他們。 您需要進行循環，並使用三角法計算每個圓的中心。

 var w = 1200, h = 780, x = d3.scale.linear().range([0, w]), y = d3.scale.linear().range([0, h]); var svgContainer = d3.select("body").append("svg").attr("width",w) .attr("height", h).attr("id", "svgBody").append("g"); var arcradius = 100; var circleradius = 10; // Approx number of circles we can fit around the circumference var n = (Math.PI * 2 * arcradius) / (2 * circleradius); for (var i=0; i<10; i++) { var ang = (Math.PI * 2 * i) / n; var cx = arcradius * Math.sin(ang); var cy = arcradius * Math.cos(ang); svgContainer.append("circle") .attr('cx', cx) .attr('cy', cy) .attr('r', circleradius) .attr("transform", "translate(300,300)"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>