javascript - 将文本和一些基本动画放在圆弧中

我对 D3 还很陌生，但我有 HTML、CSS 和 JavaScript 的基本知识。我的任务是在 MS Sharepoint 中为我们的团队创建一个仪表板(以前是在 Excel 中，哈哈)。

现在，我只需要 6 个弧线即可在网站页面上直观地呈现。我可以从 sharepoint 中提取数据列表并通过 javascript 进行计算，然后将其存储在变量中以将其放入 D3 弧中。这是我当前的代码:

<body>

    <div class="container" id="graph_container1">
        <svg id="svg1"></svg>
        <svg id="svg2"></svg>
        <svg id="svg3"></svg>
    </div>

    <script>

            var canvas = d3.select("#svg1")
                        .attr("width", 400)
                        .attr("height", 400);

            var group = canvas.append("g")
                        .attr("transform", "translate(150, 150)");

            var r = 100;
            var p = Math.PI * 2;
            var score = 70;
            var finalScore = p * (70/100);

            var arc = d3.arc()
                    .innerRadius(r)
                    .outerRadius(80)
                    .startAngle(0)
                    .endAngle(finalScore);

            group.append("path").attr("d", arc)
                                .attr("fill", "orange")
                                .transition()
                                .ease(d3.easeLinear)
                                .duration(2000)
                                .attrTween("d", pieTween);

            function pieTween(b) {          
                b.innerRadius = 0;
                var i = d3.interpolate( {startAngle: 0, endAngle: 0}, b );
                return function(t) { return arc(i(t));};            
            }


    </script>

</body>

我现在有 3 个主要问题:

将乐谱文本放在弧形图的中间
为弧形图制作一个简单的动画，例如填充图表直到最终得分
再创建 5 个类似的图表

我正在复制这个动画:https://www.youtube.com/watch?v=kK5kKA-0PUQ 。我尝试了它的代码，但它不起作用。

最佳答案

由于在饼图/圆环图中，通常会将一组翻译到图表的中心(此处就是这种情况)，因此只需使用 text-anchor 附加文本作为 middle (此处仅使用 2 位小数):
```
group.append("text")
    .attr("text-anchor", "middle")
    .text(d3.format(".2f")(finalScore))
```

您的 pieTween 函数有一个参数 (b)，但没有传递任何参数，因为没有数据绑定(bind)。除此之外，弧线生成器以 finalScore 作为结束 Angular ，因此不可能进行任何过渡。

相应地更改圆弧生成器和 pieTween 函数:

var arc = d3.arc()
    .innerRadius(r)
    .outerRadius(80)
    .startAngle(0);

function pieTween() {
    var i = d3.interpolate({
        endAngle: 0
    }, {
        endAngle: finalScore
    });
    return function(t) {
        return arc(i(t));
    };
}

对于 S.O. 来说太宽泛了，听起来像是一个请求。自己尝试一下，如果不能，请提出另一个问题(共享不起作用的代码)。

以下是经过这些更改的代码:

<body>

  <div class="container" id="graph_container1">
    <svg id="svg1"></svg>
    <svg id="svg2"></svg>
    <svg id="svg3"></svg>
  </div>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    var canvas = d3.select("#svg1")
      .attr("width", 400)
      .attr("height", 400);

    var group = canvas.append("g")
      .attr("transform", "translate(150, 150)");

    var r = 100;
    var p = Math.PI * 2;
    var score = 70;
    var finalScore = p * (70 / 100);

    var arc = d3.arc()
      .innerRadius(r)
      .outerRadius(80)
      .startAngle(0);

    group.append("path")
      .attr("fill", "orange")
      .transition()
      .ease(d3.easeLinear)
      .duration(2000)
      .attrTween("d", pieTween);

    group.append("text")
      .attr("text-anchor", "middle")
      .text(d3.format(".2f")(finalScore))

    function pieTween() {
      var i = d3.interpolate({
        endAngle: 0
      }, {
        endAngle: finalScore
      });
      return function(t) {
        return arc(i(t));
      };
    }

  </script>

</body>

关于javascript - 将文本和一些基本动画放在圆弧中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50963824/

javascript - 将文本和一些基本动画放在圆弧中

上一篇：javascript - Mocha 测试提示未处理的 Promise，但使用带有 catch block 的 async/await

下一篇：javascript - 对象字面量中的 ES6 简洁方法和非简洁方法