如何在圆弧中绘制圆圈？ [英] How to draw Circles in an Arc?

问题描述

我正在尝试制作圆弧并用小圆圈填充它，但我不能在路径标记中添加圆圈。我必须在弧内绘制10行圆圈，每行包含10个圆圈。圆圈应该如Tilford Tree，请访问 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））
。追加（圈）。attr（'r'，10）; 
  

解决方案

路径是路径。圆圈是圆圈。它们是单独的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 ; //我们可以围绕圆周的大约圆圈数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 /库/ D3 / 3.4.11 / d3.min.js>< /脚本>  

I'm trying to make an arc and fill it with small circles, but I can't add circle in path tag.I have to draw 10 rows of circles inside an Arc that each row contains 10 circles.The circles should be like Tilford Tree,Visit http://bl.ocks.org/mbostock/4063550. Does anyone know what I'm doing wrong? This is my code:

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

解决方案

Paths are paths. Circles are circles. They are separate SVG elements. You can't mix them. You need to make a loop and calculate the centre of each of your circles using trigonometry.

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>

这篇关于如何在圆弧中绘制圆圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！