Text that is curving around a D3.js pie chart

I am currently working on creating a 3D-Js chart and I would like the pie text to wrap around the pie itself.

This is the exact effect that I am trying to achieve: https://i.sstatic.net/YOLdo.png

I am facing two main issues: I am currently printing two separate charts (with labels printed in another chart) and adjusting them using CSS.

- First, I am struggling to set the labels within the same chart so I am having to adjust it with CSS.

- Secondly, I cannot figure out how to align the labels chart correctly with the first chart.

If there is a way to have both printed in the same chart, please advise.

Below is a snippet of my code:

javascriptcssd3.jscharts

Answer №1

Here is your code refactored slightly:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <div id="svgContent"></div>

  <script>
    var data = [{
      label: "BC",
      value: 50
    }, {
      label: "Alb",
      value: 20
    }, {
      label: "Mani",
      value: 100
    }, {
      label: "Sascn",
      value: 80
    }, {
      label: "ORIO",
      value: 20
    }];

    var margin = {
      top: 40,
      left: 40,
      right: 40,
      bottom: 40
    };
    width = 300;
    height = 300;
    radius = Math.min(width - 100, height - 100) / 2;
    var color = d3.scale.category10().range(["#e8af92", "#a9e892"]);
    var arc = d3.svg.arc()
      .outerRadius(radius - 230)
      .innerRadius(radius - 50)
      .cornerRadius(20);
    var arcOver = d3.svg.arc()
      .outerRadius(radius + 5000)
      .innerRadius(200);

    var a = width / 2 - 20;
    var b = height / 2 - 90;

    var svg = d3.select("#svgContent").append("svg")
      .attr("viewBox", "0 0 " + width + " " + height / 2)
      .attr("preserveAspectRatio", "xMidYMid meet");

    var defs = svg.append("defs");

    svg = svg.append("g")
      .attr("transform", "translate(" + a + "," + b + ")");

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
        return d.value;
      })
      .padAngle(.4);
      
    data = pie(data);
    
    // Adding to the definitions
    defs.selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("id", function(d,i){
        return "arc" + i;
      })
      .attr("d", arc);

    // Creating the arcs
    var g = svg.selectAll(".arc")
      .data(data)
      .enter()
      .append("g");

    g.append("path")
      .style("fill", function(d) {
        return color(d.data.value);
      })
      .attr("d", arc);

    // Including text on the arcs
    g.append("text")
      .append("textPath")
      .attr("xlink:href", function(d,i){
        return "#arc" + i;
      })
      .text(function(d){
        return d.data.label;
      })
      .style("font", "8px sans-serif");
      
  </script>

</body>

</html>

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

Is it possible to dynamically add the URL to an iframe based on a condition being true, and then iterate through a list of URLs before

I'm trying to figure out how to change the URL in an iframe based on the presence of a class="show". The first time the element has the class "show," it should load about.html. The second time the same element has the class "show," it should open wor ...

javascriptjqueryclassif-statementsrc

Tips for sending formData (file upload) via jQuery ajax with MVC model

My Web Development Challenge : //IMAGE UPLOAD var formData = new FormData(); var totalImages = document.getElementById("ImageUpload").files.length; for (var x = 0; x < totalImages; x++) { ...

javascriptc#jqueryajaxasp.net-mvc

*ngIf doesn't seem to be functioning as expected compared to other *ngIf directives

Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...

javascripthtmlangularmeteor

Adding images to .xsl using XML

I have created a unique "blog" using XML and XLST. The format of the blog is as follows: <post id="1" category="Miscellaneous"> <ptitle>MiG-21</ptitle> <psubtitle>Mikoyan-Gurevich MiG-21</psubtitle> <image></image& ...

cssxmlimagexsltxslt-1.0

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss

AngularJS to validate image dimensions (width and height) on upload

Hello, I am new to working with Angular JS. I have been experimenting with a login form that includes a file upload field for the user picture. The input field code looks like this: <input type="file" file-model="userPic"/> When I submit the form i ...

javascriptangularjs

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Currently, I am facing an issue with an angular bootstrap popover on some text. The problem arises when the user tries to click on a link inside the popover as it disappears. Additionally, when changing from one popover to another, the previous one does no ...

javascriptangularjsangular-ui-bootstrap

Hover over parts of an image to bring attention to them

I am interested in developing a webpage featuring a black and white image of 5 individuals. When hovering over each person, I would like them to illuminate and display relevant information in a dialog box next to them. Do you have any tips on how I can ac ...

javascriptjquerycss

JavaScript callbacks using customized parameters

I am currently grappling with the challenge of incorporating an asynchronous callback in node without prior knowledge of the potential arguments. To provide more clarity, let me outline the synchronous version of my objective. function isAuthorized(userI ...

javascriptnode.jsasynchronous

Having difficulty displaying data in the proper format with two-way binding

In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies i ...

htmlcssangulartypescript

Having trouble with the scrollbar appearance after updating Chrome?

I've encountered an issue with my code after the latest Chrome update. Is there a way to implement cross-browser styling for scrollbars? // Looking for Scrollbar Styling Solution const scrollbarStyle = { scrollbarColor: `${themeLayers.scrollBar[0 ...

javascriptcssmaterial-ui

JavaScript is failing to update the table values as users interact with it

I've created an HTML table and used PHP to populate the values. The goal is to allow users to update order statuses with a status and message input. Initially it works fine, but after multiple uses, it either updates the wrong row or doesn't up ...

javascriptphphtml

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

javascriptphpjqueryhtmlajax

Vite build error: TypeError - Unable to access properties of null while trying to read 'useContext'

I used the following component imported from material-ui : import Paper from '@mui/material/Paper'; After running npm run build followed by npm run preview, I encountered an error in the console: Uncaught TypeError: Cannot read properties of n ...

javascriptreactjsbuildmaterial-uivite

What is the best way to simulate a constructor-created class instance in jest?

Suppose there is a class called Person which creates an instance of another class named Logger. How can we ensure that the method of Logger is being called when an instance of Person is created, as shown in the example below? // Logger.ts export default cl ...

javascripttypescriptclassjestjsmocking

Tips for utilizing the getServerSideProps function

I want to improve the SEO friendliness of my page by utilizing the getServerSideProps method. Despite searching online, I couldn't find a specific example that fits my situation. I am uncertain about how to proceed since I currently have a useEffect m ...

javascriptreactjsnext.js

The navigation menu collapses upon itself when resizing the browser window

Every time I try to adjust the browser size, the navigation menu seems to collapse within itself, creating a strange effect. I can't figure out what's causing this issue. I've experimented with max-width and sometimes including the "wrapper ...

htmlcss

Fetching an image from Firebase Storage for integration into a Vue application

I am encountering an issue while trying to fetch an image from my firebase storage to display it in my Vue application. The upload process from the app to firebase storage runs smoothly, but there is an error during retrieval. My setup involves using the F ...

javascriptfirebasevue.jsfirebase-storagevuex

Extracting information from an ENORMOUS Array

Let's start with my code snippet, featuring an array: var UserProfiles = [{ userProfileID: 1, firstName: 'Austin', lastName: 'Hunter', email: 'test', token: '', platform: 'android ...

javascripthtmlangularjsarrays

How can I access dynamically created input elements without using $refs, such as getting focus?

Is there a way to handle dynamically created inputs for editing purposes without using jQuery or vanilla JS all the time? Each input element has its own ID and is displayed through v-if when editing is triggered. However, Vue does not recognize them in r ...

javascriptvue.js