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

Question

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

1. 我想将我的中间数字格式化为 %，但我做不到。每当我尝试使用 d3.format 时，它都会返回一个 NaN 值 我如何用我当前的代码做到这一点？

2. 如何在弧形图下方附加文本？我想在那里放置一个描述(大约 2-3 个句子)并留出足够的间距，因为这将在仪表板中使用。我尝试了 group.append("text").attr("text-anchor", "bottom") 但它不起作用所以不是它。

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

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

谢谢大家!

Answer 1

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

I want to format my middle numbers to % but i can't make it work. It returns a NaN value whenever i try to use d3.format How can i do that with my current code?

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

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)) + '%'); };

.

How can i append a text below my arc chart? I want to put a description there (around 2-3 sentences) with enough spacing since this will be used in a dashboard. I tried group.append("text").attr("text-anchor", "bottom") but it doesnt work so it's not it.

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

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

.

How can i change the font size, weight and style of the texts?

使用 style() 设置样式。

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

.

Currently, i only use attr("fill", "red") line of code to color my graph and texts. How can i use an RGB/RGBA color scheme? I tried it with "fill" but it won't work.

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

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

所有这些都会起作用。这是您的最新 fiddle ，其中包含上述所有内容。

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

希望对您有所帮助!