番号を円に追加する方法

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）'で表されます。これは円の配列を作成する順序ですが、iの代わりに好きなものを置くことができます – peter

番号を円に追加する方法

答えて

関連する問題