【d3】圆弧（虚线）比例图

最新推荐文章于 2022-06-13 13:13:07 发布

W_jin

最新推荐文章于 2022-06-13 13:13:07 发布

阅读量2.7k

点赞数

分类专栏：第三方插件文章标签： d3.js

本文链接：https://blog.csdn.net/W_jin/article/details/84138094

版权

第三方插件专栏收录该内容

11 篇文章 0 订阅

订阅专栏

需要的效果图：

d3全部代码：

<html>  
    <head>  
        <meta charset="utf-8">  
        <title>d3</title>  
    </head> 
    <body>  
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>
            var width = 600;
            var height = 600;
            var dataset = [30 , 10];
            
            var svg = d3.select("body").append("svg")
                                    .attr("width",width)
                                    .attr("height",height);
            
            var pie = d3.layout.pie();
            
            var outerRadius = width / 4;
            var innerRadius = width / 4;
            var arc = d3.svg.arc()
                            .innerRadius(innerRadius)
                            .outerRadius(outerRadius);
            var text = d3.select('svg')
                         .append("text")
                         .text('30%')
                         .attr("transform","translate("+outerRadius+","+outerRadius+")")
            var arcs = svg.selectAll("g")
                          .data(pie(dataset))
                          .enter()
                          .append("g")
                          .attr("transform","translate("+outerRadius+","+outerRadius+")")
                          .attr("stroke",function(d,i){
                                if(i==0){
                                    return "red";
                                }else{
                                    return "blue";
                                }
                            }) 
                          .attr("stroke-width","10")
            arcs.append("path")
                .attr("fill",function(d,i){
                    if(i==0){
                        return "white";
                    }else{
                        return "blue";
                    }
                })
                .attr("d",function(d){
                    return arc(d);
                })
                .attr("stroke-dasharray",function(d,i){
                    if(i==0){
                        return "5,5";
                    }else{
                        return "0,0";
                    }
                });
        </script>  
    </body>  
</html>

W_jin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【d3】圆弧（虚线）比例图

需要的效果图：d3全部代码：&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;d3&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;sc
复制链接

扫一扫