Question

所以我现在有以下图形和代码：http://jsfiddle.net/moqvfj65/17

我想将中间数字格式化为％，但我无法使其正常工作。每当我尝试使用NaN时，它都会返回一个d3.format值，如何使用当前代码执行此操作？
如何在弧形图下方添加文本？我想在此处以足够的间距放置说明（大约2-3个句子），因为它将在仪表板中使用。我尝试了group.append("text").attr("text-anchor", "bottom")，但是它不起作用，不是吗。
如何更改文本的字体大小，粗细和样式？
当前，我仅使用attr("fill", "red")行代码来为图形和文本着色。如何使用RGB / RGBA配色方案？我尝试使用“填充”功能，但无法正常工作。

谢谢你们！

Answer 1

根据我对您所提出问题的理解，您可以通过以下方式来解决这些问题。

我想将中间数字格式化为％，但我无法使其正常工作。它每当我尝试使用d3.format时都会返回NaN值用我当前的代码？

调用插值方法时，只需在文本后附加一个％符号即可。

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/

希望有帮助！

D3.js-在图形中添加和自定义文本

1 个答案: