d3.js 数据驱动文档图表插件-BFW插件库

d3.js 数据驱动文档图表插件

第一步引入bfwone，在依赖配置里设置d3

第二步执行d3的插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=d3&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            d3.selectAll("p").style("color", function() {
                return "hsl(" + Math.random() * 360 + ",100%,50%)";
            });

        });
    </script>
</head>
<body>
    <p>
        d3使用样例
    </p>
    <p>
        d3使用样例
    </p>
    <p>
        d3使用样例
    </p>
    <p>
        d3使用样例
    </p>
    <p>
        d3使用样例
    </p>
</body>
</html>

再看一个饼状图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=d3.v3.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            var svg = d3.select('svg');
            var color = d3.scale.category10();

            var dataset = [30, 10, 43, 55, 13];
            // 这样的值是不能直接绘制图形的，例如绘制饼图的一部分，需要知道一段弧度的起始位置和终止角度，这些值都不存在于数组的dataset中，因此需要用到布局
            // 布局的作用就是：计算出适合于作图的数据
            var pie = d3.layout.pie();
            var piedata = pie(dataset)
            console.log(piedata)//5个整数倍转换成了5个对象，每个对象都有：起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。
            // 绘制图形
            // 为了根据转换后的piedata绘图，还需要一样工具：生成器
            // 弧生成器
            var outerRadius = 150;
            var innerRadius = 100;
            var arc = d3.svg.arc()//弧生成器；
            .innerRadius(innerRadius)//设置内半径
            .outerRadius(outerRadius)//设置外半径
            // 先添加g，再添加path
            var arcs = svg.selectAll('g')
            .data(piedata)
            .enter()
            .append('g')
            .attr("transform", "translate(200,200)");
            // 接下来给每个g添加path
            arcs.append('path')
            .attr('fill', function (d, i) {
                return color(i)
            })
            .attr('d', function (d) {
                return arc(d)
            })
            // 添加文本
            arcs.append("text")
            .attr("transform", function (d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")//水平居中；
            .text(function (d) {
                return d.data;
            });
        });
    </script>
    <style>
        svg {
            width: 600px;
            height: 600px;
            display: block;
            margin: 100px auto;
       
        }

        text {
            fill: #fff;
        }
    </style>
</head>
<body>
    <svg></svg>
</body>
</html>

更多例子看官方网站 https://d3js.org/