D3.js - 在图表中添加和自定义文本答案

【问题标题】：D3.js - Adding and customizing texts in a graphD3.js - 在图表中添加和自定义文本
【发布时间】：2018-06-23 11:29:09
【问题描述】：

所以我现在有了这个图表和代码：http://jsfiddle.net/moqvfj65/17

我想将我的中间数字格式化为 %，但我无法让它工作。每当我尝试使用d3.format 时，它都会返回一个NaN 值我如何使用我当前的代码来做到这一点？
如何在我的弧形图下方附加文本？我想用足够的间距在那里放置一个描述（大约 2-3 个句子），因为这将在仪表板中使用。我试过group.append("text").attr("text-anchor", "bottom")，但它不起作用所以不是它。
如何更改文本的字体大小、粗细和样式？
目前，我只使用attr("fill", "red") 代码行来为我的图表和文本着色。如何使用 RGB/RGBA 配色方案？我用“填充”试过了，但它不起作用。

谢谢你们！

【问题讨论】：

当您说要将数字格式化为 % 时，您的意思是您只想显示带有 % 符号的确切值吗？
这个问题有什么更新吗？

标签： javascript css json string d3.js

【解决方案1】：

根据我对您提出的问题的理解，您可以通过以下方式进行。

我想将我的中间数字格式化为 %，但我无法让它工作。它每当我尝试使用 d3.format 时返回一个 NaN 值我该怎么做使用我当前的代码？

当您调用 interpolate 方法时，您可以简单地在文本中附加一个 % 符号。

group.append("text")
    .attr("text-anchor", "middle")
    .attr("alignment-baseline", "middle")
    .attr("fill", color)
    .text(d3.format(",.1%")(score/100))
    .transition()
    .duration(4000)
    .on("start", function() {
    d3.active(this)
      .tween("text", function() {
      var that = d3.select(this),
          i = d3.interpolateNumber(0, score);
      //return function(t) { that.text(format(i(t))); };
      return function(t) { that.text(format(i(t)) + '%'); };
    });
  });

注意return function(t) { that.text(format(i(t)) + '%'); };这一行

如何在我的弧形图下方添加文本？我想放一个有足够的间距的描述（大约 2-3 句话）这将在仪表板中使用。我试过 group.append("text").attr("text-anchor", "bottom") 但它不起作用所以不是这样。

您可以将新组附加到您的 svg 并设置其 text 属性。您可以使用transform 属性将其放置在正确的位置。

group.append("text")
    .text(description)
    .attr('transform', 'translate('+ (-r) + ',' + (r+50) + ')');

如何更改文本的字体大小、粗细和样式？

使用style() 设置样式。

group.append("text")
    .text(description)
    .attr('transform', 'translate('+ (-r) + ',' + (r+50) + ')')
    .style("font-size", "16px")
    .style("font-weight", "bold")

目前，我只使用 attr("fill", "red") 行代码来着色我的图表和文本。如何使用 RGB/RGBA 配色方案？我尝试过这个使用“填充”，但它不起作用。

您可以使用 rgb、文本名称或十六进制值来定义颜色。

var color1 = "orange",
    color2 = "#477225",
    color3 = "rgb(65, 244, 169)";

所有这些都会起作用。这是您更新的小提琴，包括以上所有内容。

http://jsfiddle.net/nimeshka/moqvfj65/65/

希望对你有帮助！！

【讨论】：