Question

我想在弧形图下方添加描述文字，但我不知道该怎么做。我想在下面放置2-3行文字，因为它将用于仪表板。除此之外，我想自定义文本的颜色和字体样式。我尝试通过将attr和样式放在.append（“ text”）之后来使用它，但是它不起作用。

代码如下：

function drawPie() {
  var PDAscore1 = 80,
      PDAscore2 = 45,
      PDAscore3 = 100;

  var svg1 = "#svg1",
      svg2 = "#svg2",
      svg3 = "#svg3";

  var color1 = "orange",
      color2 = "red",
      color3 = "green";

  drawArc(PDAscore1, svg1, color1);
  drawArc(PDAscore2, svg2, color2);
  drawArc(PDAscore3, svg3, color3);

  function drawArc(rawScore, svgNum, color){

      //canvas for the arc graph
      var canvas = d3.select(svgNum)
        .attr("width", 400)
        .attr("height", 400);

      //make it a group element (like a block/div element)
      var group = canvas.append("g")
        .attr("transform", "translate(150, 150)");

      //calculation for the radius, pie and score
      var r = 100;
      var p = Math.PI * 2;
      var score = rawScore;
      var finalScore = p * (score / 100);

      //drawing of the arc
      var arc = d3.arc()
          .innerRadius(r)
          .outerRadius(65)
          .startAngle(0);

      //Insertion of the 'arc path' + animation
      group.append("path")
          .attr("fill", color)
          .transition()
          .ease(d3.easeExpInOut)
          .duration(2500)
          .attrTween("d", pieTween);

      //Insertion of the text of score in the middle of the arc/donut chart
      group.append("text")
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("fill", color)
          .text(d3.format(",.1%")(score/100));

      //function for the animation. Start with the 0 -> finalScore
      function pieTween() {
          var i = d3.interpolate({endAngle: 0}, {endAngle: finalScore});
          return function(t) {
              return arc(i(t));
          };
      }

  }
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<body onload="drawPie()">

      <div class="container" id="graph_container1">
        <svg id="svg1"></svg>
        <svg id="svg2"></svg>
        <svg id="svg3"></svg>
      </div>

</body>

谢谢！

D3.js-将文本放在Arc的底部并自定义文本属性

0 个答案: