編輯文本正在使用

Question

在此codepen 1：https://codepen.io/Siddharth11/pen/LVQmjN

我明白d3js被用在這裏。

當我使用瀏覽器進行檢查時，我看到所有class.Plz從瀏覽器窗口中看到這個類的圖像。

任何人都可以告訴我如何編輯HTML，如果我願意。我想編輯出現在右側的文本作爲顏色代碼？

[1]: https://codepen.io/Siddharth11/pen/LVQmjN 

Answer 1

text屬性更改<text>的innerHTML。現在它是color[i]。改變它來改變標籤。我建議你閱讀d3的文檔。 https://github.com/d3/d3/wiki

text.enter() 
    .append('text') 
    .attr('dy', '0.35em') 
    .style("opacity", 0) 
    .style('fill', (d, i) => colors[i]) 
    .text((d, i) => colors[i]) //<-- Change here 
    .attr('transform', d => { 
     // calculate outerArc centroid for 'this' slice 
     let pos = outerArc.centroid(d) 
     // define left and right alignment of text labels        
     pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1) 
     return `translate(${pos})` 
    }) 
    .style('text-anchor', d => midAngle(d) < Math.PI ? "start" : "end") 
    .transition() 
    .delay((d, i) => arcAnimDur + (i * secIndividualdelay)) 
    .duration(secDur) 
    .style('opacity', 1)