jane jane - 20 days ago 6
jQuery Question

edit text not found in the html where d3js is being used

in this codepen 1: https://codepen.io/Siddharth11/pen/LVQmjN

I understand d3js is being used here.

When I use the browser to check ,i see all the class.Plz see this image of the classes from the browser window.
enter image description here

Can anyone tell me how will I edit the html,if I wish to.I want to edit the text which appear on right side as color code ?

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

Answer

The text attribute changes the innerHTML of the <text>. Right now it is color[i]. Change it to change the labels. I suggest you to read the documentation of 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)