我正在尝试并排显示 2 个进度条，但其中一个正在填充，另一个甚至不是代码在不同的 js 函数中

I am trying to show 2 progress bars side by side but one of them is populating and the other is not even the code is in different js functions

本文关键字：填充 一个 另一个 js 函数 代码 显示      更新时间：2023-09-26

下面是我在jsbin中尝试过的代码法典

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 .background {
    fill: #DFEAFD;
  }
  .foreground {
    fill: #2E7AF9;
  }
.progress-meter {
  .background {
    fill: #DFEAFD;
  }
  .foreground {
    fill: #2E7AF9;
  }
  text {
    font-family: 'Georgia' sans-serif;
    font-size: 90px;
  }
  .text2 {
    font-family: 'Georgia' sans-serif;
    font-size: 20px;
  }
}
</style>
<body>
<div class="completion-chart"></div>
<div class="completion-chart1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
var test=function(){
var width = 120,
    height = 120,
    twoPi = 2 * Math.PI,
    progress = 0,
    total = 100,
    formatPercent = d3.format(".0%");
var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(30)
    .outerRadius(45)
;
var svg = d3.select(".completion-chart1").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('fill', '#2E7AF9')
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var meter = svg.append("g")
    .attr("class", "progress-meter");
meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));
var foreground = meter.append("path")
    .attr("class", "foreground");
var text = meter.append("text")
    .attr("text-anchor", "middle");
var i = d3.interpolate(progress, 90/100);
    d3.transition().duration(1200).tween("progress", function () {
        return function (t) {
            progress = i(t);
            foreground.attr("d", arc.endAngle(twoPi * progress));
            text.text(formatPercent(progress));
        };
    });
};
var test2=function(){
    var width = 120,
        height = 120,
        twoPi = 2 * Math.PI,
        progress = 0,
        total = 100,
        formatPercent = d3.format(".0%");
    var arc = d3.svg.arc()
        .startAngle(0)
        .innerRadius(30)
        .outerRadius(45)
    ;
    var svg = d3.select(".completion-chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr('fill', '#2E7AF9')
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    var meter = svg.append("g")
        .attr("class", "progress-meter");
    meter.append("path")
        .attr("class", "background")
        .attr("d", arc.endAngle(twoPi));
    var foreground = meter.append("path")
        .attr("class", "foreground");
    var text = meter.append("text")
        .attr("text-anchor", "middle");
    var i = d3.interpolate(progress, 90/100);
        d3.transition().duration(1200).tween("progress", function () {
            return function (t) {
                progress = i(t);
                foreground.attr("d", arc.endAngle(twoPi * progress));
                text.text(formatPercent(progress));
            };
        });
    };
    test();
    test2();
</script>
</body>

我正在尝试并排显示 2 个进度条，但其中一个正在填充，另一个甚至不是代码在不同的 js 函数中以下是该问题的屏幕截图：

此链接中的图片

我是否缺少任何内容或我的代码有任何问题。

使用 d3.transition().duration(1200) 时，您将过渡应用于 d3 本身，该过渡一次只能有一个过渡。因此，如果您第二次调用d3.transition().duration(1200)，则第一次过渡将被取消，并且您只能在进度之一"条"上获得过渡。

而是通过使用

d3.select(meter).transition().duration(1200)
相关文章：