Question

我想在具有不同参数的两个不同html元素上同时绘制两个圆环图。例如，第一个圆环图以99％结尾，第二个图以70％结尾。

第一张图表工作正常，但第二张图表没有。我使用相同的javascript代码绘制两个图表，但只是d3.select（）不同的元素由id和分配的数字是不同的。以下是javascript代码。

＆＃13;

<html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<div id="docsChart_slim"></div>
</body>
<script type="text/javascript">
var width = 135,
    height = 135,
    twoPi = 2 * Math.PI,
    progress = 0,
    allocated = 4257000,
    total = 4300000,
    formatPercent = d3.format(".0%");

var arc = d3.arc()  
    .startAngle(0)
    .innerRadius(58)
    .outerRadius(66);

var svg = d3.select("#docsChart_slim").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
var meter = svg.append("g")
    .attr("class", "funds-allocated-meter");

meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

var foreground = meter.append("path")
    .attr("class", "foreground");

var percentComplete = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("class", "percent-complete")
    .attr("dy", "0em");

/*var description = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("class", "description")
    .attr("dy", "2.3em")
    .text("Total Complete");*/

var i = d3.interpolate(progress, allocated / total);

 d3.transition().duration(1000).tween("progress", function() {
  return function(t) {
    progress = i(t);
    foreground.attr("d", arc.endAngle(twoPi * progress));
    percentComplete.text(formatPercent(progress));
  };
});
</script>
</html>

＆＃13;

结果也是

我已经在同一个元素上检查了一些关于执行transition（）的文档，但我要做的是在不同的元素上绘制图表。

我该怎么办？

如何使用d3.js同时绘制两个不同参数的圆环图

0 个答案: