时间戳

首页 > 解决方案 > D3.js - 在图表中添加和自定义文本

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

问题描述

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

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

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

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

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

感谢你们！

标签： javascriptcssjsonstringd3.js

解决方案

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

我想将我的中间数字格式化为 % 但我无法让它工作。每当我尝试使用 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/

希望能帮助到你！！

推荐阅读