Javascript 将文本和一些基本动画放在圆弧中_Javascript_D3.js

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

javascript d3.js

Javascript 将文本和一些基本动画放在圆弧中,javascript,d3.js,Javascript,D3.js,我是D3新手，但我对HTML、CSS和JavaScript有基本的了解。我的任务是在MS Sharepoint中为我们的团队创建一个仪表板（以前是在Excel lol中）现在，我只需要在网站页面中直观地显示6个弧。我可以从sharepoint中提取数据列表，并通过javascript进行计算，然后将其存储在变量中，以将其放入D3弧中。这是我目前的代码： <body> <div class="container" id="graph_container1">

我是D3新手，但我对HTML、CSS和JavaScript有基本的了解。我的任务是在MS Sharepoint中为我们的团队创建一个仪表板（以前是在Excel lol中）

现在，我只需要在网站页面中直观地显示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>


var canvas=d3。选择（“svg1”）
.attr（“宽度”，400）
.attr（“高度”，400）；
var group=canvas.append（“g”）
.attr（“转换”、“翻译（150150）”）；
var r=100；
var p=Math.PI*2；
var得分=70；
var finalScore=p*（70/100）；
var arc=d3.arc（）
.内半径（r）
.外层（80）
.startAngle（0）
.端角（最终芯）；
group.append（“路径”）.attr（“d”，弧）
.attr（“填充”、“橙色”）
.transition（）
.ease（d3.easeLinear）
.期限（2000年）
.attrTween（“d”，pieTween）；
函数pieTween（b）{
b、 内半径=0；
var i=d3.interpolate（{startAngle:0，endAngle:0}，b）；
返回函数（t）{返回弧（i（t））；}；
}

我现在有三个主要问题：

>P>将分数文本放在圆弧图

的中间

为弧图制作一个简单的动画，就像填充曲线图直到得到最终分数一样

再创建5个像这样的图

我正在复制此动画：。我试过它的代码，但不起作用

因为在饼图/圆环图中，通常有一组被转换到图表的中心（这里就是这种情况），所以只需使用

文本锚定

作为

中间

（这里仅使用2位小数）：

您的

pieTween

函数有一个参数（

），但没有传递参数，因为没有数据绑定。除此之外，电弧发生器的端角为

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.来说太宽了，听起来像是一个请求。你自己试试看，如果不行，可以问另一个问题（共享非工作代码）

以下是包含这些更改的代码：


var canvas=d3。选择（“svg1”）
.attr（“宽度”，400）
.attr（“高度”，400）；
var group=canvas.append（“g”）
.attr（“转换”、“翻译（150150）”）；
var r=100；
var p=Math.PI*2；
var得分=70；
var finalScore=p*（70/100）；
var arc=d3.arc（）
.内半径（r）
.外层（80）
.startAngle（0）；
group.append（“路径”）
.attr（“填充”、“橙色”）
.transition（）
.ease（d3.easeLinear）
.期限（2000年）
.attrTween（“d”，pieTween）；
组。追加（“文本”）
.attr（“文本锚定”、“中间”）
.文本（d3.格式（“.2f”）（最终核心））
函数pieTween（）{
var i=d3.插值({
端角：0
}, {
端角：最终核心
});
返回函数（t）{
返回弧（i（t））；
};
}

非常感谢。成功了！另外，谢谢你一步一步的解释，我从中学到了很多。关于#3，如果听起来像是一个请求，那么很抱歉。我要问的是，如果我要创建这些弧的另一个副本，我是否应该将代码从画布复制并粘贴到group.append（“text”）？@VinceCantuba是的，但使用不同的变量。关于代码复制，最好的办法是创建一个函数来绘制这些不同的SVG。我可以再问一遍吗？我现在有了这个图表和代码：1。我想将中间数字的格式设置为%。如何使用当前代码实现这一点？2.如何在弧图下方添加文本？我想把一个描述有足够的间距，因为这将在仪表板中使用。3.如何更改文本的字体大小和样式？再次感谢！请不要在评论区提问，没有地方回答他们：只需发布一个新问题。很抱歉。我在这里发布了一个新问题：

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));
    };
}