将数据从 JSON 导入 D3 并在饼图部分显示

Question

I have a pie graph coming along here https://imgur.com/MDdUKsQ , trying to reproduce this image: https://imgur.com/rNKtAUD

Been struggling a bit with trying to get the large percentage headers to appear for each section. I gave thought to making HTML elements and doing it the long way, but it would be nice to pull them in from a JSON file as shown below. How would I accomplish this? Using V6 of D3

JSON:

[
    {"name": "Less than a month","total": 100,"Percent":1.39},
    {"name": "1-3 months","total": 290,"Percent":20.83},
    {"name": "3-6 months","total": 400,"Percent":56.94},
    {"name": "6-12 months","total": 600,"Percent":5.56},
    {"name": "More than 12 months","total": 300,"Percent":15.28},
    {"name": "There won't be business as usual","total": 100,"Percent":15.28}

    ]

// get data from JSON
function getData() {
    d3.json("./data/piedata.json", function(d) {return d}).then(drawPie)
}

getData()

//draw the pie chart
function drawPie(data) {
    colourScale.domain(data.map(d=>d.name))
    const angles = pie(data)
    const paths = pieCanvas.selectAll("path").data(angles)
    paths.enter().append("path").attr("d", arcPath).attr("class","arc")
                 .attr("stroke","white").attr("fill", d=>colourScale(d.data.name))
    //add legend
    const legend = svg.selectAll('.legend').data(colourScale.domain()).enter().append('g')                                          
          .attr('class', 'legend').attr('transform', function(d, i) {                    
           const height = legendRectSize + legendSpacing          
           const offset =  height * colourScale.domain().length / 3
           const horz = 20 * legendRectSize                       
           const vert = i * height - offset + 260                      
           return 'translate(' + horz + ',' + vert + ')'});  

    legend.append('rect').attr('width', legendRectSize).attr('height', legendRectSize)                        
          .style('fill', colourScale).style('stroke', colourScale)                      
          
    legend.append('text').attr('x', legendRectSize + legendSpacing)           
          .attr('y', legendRectSize - legendSpacing).text(function(d) { return d })                      
      }

Answer 1

Try d3.json("./data/piedata.json", function(d){ drawPie(d); })