javascript - 编辑在使用 d3js 的 html 中找不到的文本

Question

在此代码笔中 1 : https://codepen.io/Siddharth11/pen/LVQmjN

我知道这里使用的是 d3js。

当我使用浏览器检查时，我看到了所有类。请从浏览器窗口中查看类的图像。

如果我愿意，谁能告诉我如何编辑 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)