How can I ensure the objects around the center are evenly spaced on the circumference in d3?

Here is the link to my fiddle: fiddle. The issue I am facing is related to center pie and circles around its circumference. While everything seems fine so far, I am struggling with placing text and images on all the small circles. Adding text is causing misalignment from the center.

To tackle this problem, I considered drawing a few circles at a time, maybe each quadrant, and adjusting the width accordingly. However, the total number of small circles varies, making it difficult for me to determine how many circles are in each quadrant at a given time. I believe there might be a more elegant solution that I am overlooking. If anyone is willing to share their insights, I would greatly appreciate it.

sub_circle.append('text')
    .attr('class', 'labels')
    .text(function (d) {
    return d.name;
})
    .attr('x', function (d, i) {
    return (350 * Math.cos(scale_arcs_parent(i)) + 500);
})
    .attr('y', function (d, i) {
    return (350 * Math.sin(scale_arcs_parent(i)) + 350);
})

Answer №1

The current observation indicates that the text anchor remains equidistant from the center, but due to its changing relative position to the text, it appears as if the text distance varies. To address this issue to some extent, you can adjust the text-anchor based on the angle.

.attr("text-anchor", function(d, i) {
        var a = scale_arcs_parent(i);
        if(a < Math.PI/3) return "start";
        if(a < 2*Math.PI/3) return "middle";
        if(a < 4*Math.PI/3) return "end";
        if(a < 5*Math.PI/3) return "middle";
        return "start";
 })

For a complete demonstration, refer to the jsfiddle link here. Feel free to customize the anchor thresholds according to your specific requirements.

Answer №2

If you don't specify the exact positioning of the text in relation to the circles, it becomes a matter of interpretation.

One way to maintain the labels' relative position to the circles is by utilizing a mix of text-anchor and dy.


    sub_circle
    .append('text')
    .attr('class','labels')
    .attr('text-anchor','middle')
    .attr('dy','-30')
    .text(function(d){return d.name;})
    .attr('x',function(d,i){return (300*Math.cos(scale_arcs_parent(i))+500);})
    .attr('y',function(d,i){return (300*Math.sin(scale_arcs_parent(i))+350);})

Link to example on jsfiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

unable to access the undefined resource

Currently working on building my personal portfolio using HTML, CSS, and JavaScript. I have implemented transition animations that work smoothly until clicking on another hyperlink triggers the transitions properly but results in a blank page with the erro ...

AngularJS ng-switch-trigger enclosed within its own ng-switch-wrapper

In my current project, I am working on switching between two buttons that act as their own triggers for the switch. To illustrate further: <span ng-switch on="patientSwitch"> <span ng-switch-when="edit"> <button ng-click="patien ...

Why was the event handler attached and for what purpose does it serve in this particular location?

When using Typescript with JQuery, I encountered a strange issue where a click event seemed to be added multiple times each time the user opened a dialog. Despite creating a new SettingsDlog object for each dialog instance, the click event did not behave a ...

Waiting for the HTTP response in NodeJS before sending the next request

I'm currently struggling with my NodeJS code. I am attempting to send an HTTP Request to a REST API, which will respond with a new URL. Once I receive this URL, I need to make another request to that specific URL and continue the process. My current ...

When the user clicks, open the link in a new tab

How can I use jQuery to open a designated URL in a new tab when a user clicks anywhere on the page, but only once? I'm struggling to write the script for this and would love to hear your solutions! ...

Issue with Slick carousel causing image scaling to be problematic

I'm currently utilizing slick to create an image carousel. Although it's functioning properly, I desire for the center image to scale and be larger than the others. While I've managed to achieve this to some extent, the height of the contain ...

Every time I click once, two unnecessary AJAX calls are triggered, and the DOM remains outdated until I manually refresh the page

Whenever I click on a span, it sends an ajax request to delete the clicked todo from the database. However, in the DOM, the item is not removed until I refresh the page. Here is my index.html file: <ul class="list"> </ul> I noticed ...

The function is not visible when rendering in ReactJS

The function works on the main page without a Header, but when I try to implement it on a separate page, it doesn't work. I've checked examples and everything seems correct, but it still doesn't display on a separate page. You can add header ...

What is the method for arranging by oldest and newest based on date?

I need help organizing my presentation with a variety of books. How can I sort them from oldest to newest? const userBooks = [ { id: 1, name: "", author: "", genre: "", date: "2022-1-12", }, ...

Creating contour lines in an SVG using d3.js with (geo/topo)json data

I need help creating an SVG image using contour line data from (geo/topo)JSON and rendering it with d3.js. Essentially, I want the image to be responsive, have animated paths, interactive color changes, and the ability to switch between different data file ...

Waiting in Python using Selenium until a class becomes visible

Currently, I am trying to extract information from a website that has multiple web pages. This is how my code appears: item_List = [] def scrape(pageNumber): driver.get(url + pageExtension + str(pageNumber)) items = driver.find_elements_by_class_ ...

Check if the AJAX call does not succeed within the .always method

I need to create a condition that checks if an ajax call fails or if the response text is 'false', then do one thing; otherwise, do something else. The code I currently have seems to work in Chrome but might not be compatible with all browsers. A ...

Encountered a global secondary index error while trying to create a new table

I'm in the process of setting up a table with a global secondary index using the JavaScript SDK within Node.js: var messagesTableParams = { TableName : "Messages", KeySchema: [ { AttributeName: "to", KeyType: "HASH"}, //Partition key ...

Combining AngularJS and AngularFire: A guide to editing entries

In the $scope object, I have: $scope.current_account_key: This is the key obtained from my update modal $scope.current_account: It contains a name ($scope.current_account.name) and a description ($scope.current_account.description) for the account entry. ...

techniques for accessing HTML source code through an AJAX call

I am trying to retrieve the HTML source of a specific URL using an AJAX call, Here is what I have so far: url: "http://google.com", type: "GET", dataType: "jsonp", context: document.doctype }).done(function ...

Retrieving Values from Array with AngularJS Keys - A How-To Guide

I need to access a specific value from a key inside an array, like this: $scope.result = [ { "key":"logo_big", "value":"/assets/images/aaa.jpg" }, { "key":"logo_small", "value":"/assets/images/logo94x57Bis.png" }, { ...

Organize intricate JavaScript Arrays

Similar Question: How to sort an array of javascript objects? I'm in the process of transitioning some of my older ActionScript 2.0 code to JavaScript. While most things are running smoothly, I've hit a roadblock when trying to numerically s ...

Harnessing the Power: Ajax Combined with JQuery

I am facing an issue with my function where I make an ajax request, wait for a response, and return a value but the returned value is coming out as undefined. What could be causing this problem? function RetrieveDataFromURL(url){ return $.ajax({ ...

Utilizing the .map() function to display both the property value and property name of a JavaScript object

Essentially, my goal is to output an object within a react component. Here is an example of what the object looks like: var obj = { prop1: "prop1", prop2: "prop2", prop3: "prop3", } I want to display both the property name and its value, and I am ...

Determining the number of items in an array using Javascript

I am working with an array that is made up of an unlimited number of objects, all with the same structure. When I log the entire array, it shows up like this: [object], [object], [object], and so on... Adding a new object to the array means I could eithe ...