Question

我使用jsFiddle创建了一些具有预定义位置的圆圈。如何在这些圆圈上添加数字，以便每个圆圈都有一个数字？

function draw_circle(center_x, center_y){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var centerX = center_x;
    var centerY = center_y;
    var radius = 30
    ;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'lightblue';
    context.fill();
    context.lineWidth =3;
    context.strokeStyle = '#003300';
    context.stroke();
  }

Answer 1

我制作了一个简化版的样本，展示了如何为圈子编号

文本节点紧跟在圆圈后面。圆的不透明度设置为0.5，否则文本被圆圈覆盖。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
    <style>
     svg .circle {
         stroke: yellow;
         opacity: 0.5;
         stroke-width: 2;
     }
     </style> 
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
    var width = 900, height = 650;
    var radius = 30; 
    var numCircles = 10;
    var circles=[[133,396],[234,511.0000305175781],[369,116],[348,388],[231,278],[351,232],[520,228],[116,199],[522,425],[229,120]];
    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).attr("id", 'svg');
    var g_circles = svg.append("g").attr("class", "circles");
    $.each(circles, function(i, d) {
        g_circles.append("circle").attr("class", "circle").attr("id", "circle" + i).attr("r", radius).attr("cx", d[0]).attr("cy", d[1]);
        g_circles.append("text").attr("x", d[0]-5).attr("y", d[1]+5).text(i);
    });
});
      </script>
</body></html>

如何在圈子中添加数字

1 个答案: