怎么给圈子加号
How to add number to circle
我使用 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();
}
我制作了您示例的简化版本,展示了如何给圆圈编号
文本节点紧跟在圆圈之后。圆圈的不透明度设置为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>
我使用 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();
}
我制作了您示例的简化版本,展示了如何给圆圈编号
文本节点紧跟在圆圈之后。圆圈的不透明度设置为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>