如何將數字添加到圈子

我已經使用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(); 
    }

來源

2016-10-14 N.zay

如果您已經創建了一個JS小提琴這表明你的問題可能是值得加入的鏈接這一點，所以我們可以看到在行動和編輯/更新的代碼，而不必首先創建我們自己的再現。摩擦力越小，越容易得到更好的答案。 :) –

我做你的樣品的簡化版本，展示瞭如何號碼textnode被圈後右側附加圓圈

。圓的不透明度設置爲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>

來源

2016-10-14 23:22:25 peter

是隨機生成的數字？我可以添加一些圈子的字符和其他人的號碼嗎？ –

不，它們用'.text（i）'表示，這是你創建你的圓形數組的順序，但你可以把你喜歡的一切，而不是我 – peter

如何將數字添加到圈子

回答

相關問題