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

Question

我这里有一个饼状图https://i.stack.imgur.com/fslgG.jpg，试图复制这个图像:https://i.stack.imgur.com/NZlHs.jpg

一直在努力让每个部分出现大百分比的标题。我考虑过制作HTML元素，但如果能将它们从JSON文件中拉进来就更好了，如下所示。我该如何做到这一点?使用V6的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/pieddata .json"， function(d){drawPie(d);})