d3为饼图增加引导线

最新推荐文章于 2024-01-17 09:50:25 发布

VIP文章 justforuse

最新推荐文章于 2024-01-17 09:50:25 发布

阅读量3.3k

点赞数 1

分类专栏： d3js 文章标签： d3 饼图

本文链接：https://blog.csdn.net/u014291497/article/details/78005336

版权

当d3饼图数据过多或内部文字内容过长时，显示会变得不美观且不直观，常见的解决方式是添加引导线。

参考链接：链接

<body style="">
    <button class="randomize">randomize</button>

    <script src="./bl.ocks.org_files/d3.v3.min.js.download"></script>
    <script>
        var svg = d3.select("body")
            .append("svg")
            .append("g")

        svg.append("g")
            .attr("class", "slices");
        svg.append("g")
            .attr("class", "labels");
        svg.append("g")
            .attr("class", "lines");

        var width = 960,
            height = 450,
            radius = Math.min(width, height) / 2;

        var pie = d3.layout.pie()
            .sort(null)
            .value(function (d) {
    
                return d.value;
            });

        //定义饼图内外半径
        var arc = d3.svg.arc()
            .outerRadius(radius * 0.8)
            .innerRadius(radius * 0.4);
        //定义饼图的外圆，比饼图大，不做绘图用，用来定位位置
        var<

最低0.47元/天解锁文章

justforuse

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
d3为饼图增加引导线

当d3饼图数据过多或内部文字内容过长时，显示会变得不美观且不直观，常见的解决方式是添加引导线。参考链接：链接<body style=""> <button class="randomize">randomize</button> <script src="./bl.ocks.org_files/d3.v3.min.js.download"></script> <script>
复制链接

扫一扫