Question

我对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个主要问题：

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

我正在复制此动画：https://www.youtube.com/watch?v=kK5kKA-0PUQ。我尝试了其代码，但无法正常工作。

Answer 1

因为在饼图/甜甜圈图中，通常会有一组转换到图表的中心（在这种情况下），只需使用text-anchor作为middle附加文本（在这里，仅使用2个小数位）：
```
group.append("text")
    .attr("text-anchor", "middle")
    .text(d3.format(".2f")(finalScore))
```

您的pieTween函数具有参数（b），但是由于没有数据绑定，因此没有传递参数。除此之外，电弧发生器的终点角度为finalScore，因此不可能过渡。

更改电弧发生器和相应的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>

将文字和一些基本动画放在一起

1 个答案: