Adding numerical values to circles can be achieved by implementing various methods,

Question

Adding numerical values to circles can be achieved by implementing various methods,

I've been utilizing jsFiddle to generate multiple circles at specific locations. How can I include numbers within these circles so that each one is labeled with a number?

Check out the jsfiddle code here

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

javascript svg jsfiddle

Answer 1

Answer №1

I have created a simplified version of your example that demonstrates how to add numbers to circles.

In order to prevent the text from being covered by the circle, I have appended the textnode right after the circle and set the opacity of the circle to 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>

Answer 2

I have created a simplified version of your example that demonstrates how to add numbers to circles.

In order to prevent the text from being covered by the circle, I have appended the textnode right after the circle and set the opacity of the circle to 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>

Adding numerical values to circles can be achieved by implementing various methods,

Answer №1

Similar questions

Confirm Submission Issue in HTML Form

Displaying data using JSON on a fabric.js canvas

When Custom Route Provider is not a valid function

How to initiate a refresh in a React.js component?

Saving the information into a designated MongoDB repository with a particular title

Dynamic water filling effect with SVG

Is there a way to convert the items in the products variable into the more comprehensive detailedProducts?

What is the process for uploading a single file and an array of files with varying names using multer?

Using AngularJS: The ultimate guide to invoking a service within a module

Using AngularJS to update attributes in an HTML tag within a string

What is the best way to store multiple values in local storage using useState in react?

Retrieve the variable only once a response has been received from the POST request

JavaScript has encountered an Uncaught TypeError due to an illegal invocation

javascript/AngularJS - make elements gradually disappear

Transfer the data in the columns of Sheet1 to Sheet2 and eliminate any duplicates using Google App Script

In a perplexing turn of events, the Dojo dtl tag logic

Error: The data from the intermediate value cannot be parsed using the parseFromString() method and replaced with another value,

Orchard's TinyMce now supports a drop event with jQuery integration

Ending a timer from a different function in a React component

Transform jQuery code to its equivalent in vanilla JavaScript