BIGEMPA Js API示例中心
D3 個性展示數據源代碼展示

代碼編輯區運行下載還原
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
            以下CSS地址請在安裝軟件了替換成本地的地址
            CSS地址請使用:
            http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
            軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
        -->
    <link href='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <!--
            JS地址請使用：
            http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
        -->
    <script src='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="http://www.xawiki.com/Public/common/js/jquery.min.js"></script>
    <script src="http://www.xawiki.com/Public/js/d3.min.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .pulse-icon {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: #2f8;
        position: relative;
        box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
    }

    .pulse-icon:after {
        content: "";
        box-shadow: 0 0 6px 2px #2f8;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        animation-delay: 1.1s;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        height: 300%;
        width: 300%;
        animation: pulsate 2s infinite;
        position: absolute;
        margin: -100% 0 0 -100%;
    }

    @keyframes pulsate {
        0% {
            transform: scale(0.1, 0.1);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }

        50% {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }

        100% {
            transform: scale(1.2, 1.2);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }
    }

    .d3 {
        position: absolute;
        top: 7px;
    }

    .dataname {
        display: flex;
    }

    .dataname h4 {
        flex: 2;
        color: red;
        padding-top: 104px;
        text-align: center;
        padding-right: 33px;
    }



    #left {
        position: absolute;
        z-index: 10;
        width: 300px;
        height: 100%;
        background-color: black;
        opacity: .7;
        top: 0px;
    }

    #right {
        position: absolute;
        z-index: 10;
        width: 300px;
        height: 100%;
        background-color: black;
        opacity: .7;
        right: 0px;
        top: 0px;
    }
</style>

<body>
    <div id="map"> </div>
    <div id="left">
        <div class="ld3"></div>
    </div>
    <div style="position: absolute;
    color: white;
    z-index: 99;
    left: 120px;">
        <h4 style="margin-top: 199px;">A數據</h4>
        <h4 class="B" style="margin-top:200px">B數據</h4>
        <h4 class="C" style="margin-top:200px">C數據</h4>
    </div>
    <div id="right">
        <div class="rd3"></div>

    </div>
    <div style="position: absolute;
    color: white;
    z-index: 99;
    right: 120px;">
        <h4 class="D" style="margin-top: 199px;">D數據</h4>
        <h4 class="E" style="margin-top:200px">E數據</h4>
        <h4 class="F" style="margin-top:200px">F數據</h4>
    </div>
</body>
<script>

    //軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
    BM.Config.HTTP_URL = 'http://www.xawiki.com:9000';
    // 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.zhongkexingtu，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
    var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 4, zoomControl: true });
    var myIcon = BM.divIcon({ className: 'my-div-icon', html: '<div><span class="pulse-icon"></span></div>' });
    for (let i = 0; i < 15; i++) {
        BM.marker([20 + 20 * Math.random(), 80 + 40 * Math.random()], { icon: myIcon }).addTo(map);
    }

    //定義畫布高度 寬度
    var height = 700
    var width = 300
    //定義一個接收定時器的數組
    var interarr = []
    var svg1 = d3.select('.ld3').append('svg').attr('height', height).attr('width', width)
    var svg2 = d3.select('.rd3').append('svg').attr('height', height).attr('width', width)
    //畫餅圖
    setcircle(svg1, 100, 'c1')
    setcircle(svg1, 320, 'c2')
    setcircle(svg1, 550, 'c3')
    setcircle(svg2, 100, 'c4', true, 1000)
    setcircle(svg2, 320, 'c5', true)
    setcircle(svg2, 550, 'c6', true, 4000)
    //定義標記點擊事件
    $('.pulse-icon').on('click', function () {
        interarr.map(d => {
            clearInterval(d)
        })
        d3.selectAll('.circle').remove()

        //畫餅圖
        setcircle(svg1, 100, 'c1')
        setcircle(svg1, 320, 'c2')
        setcircle(svg1, 550, 'c3')
        setcircle(svg2, 100, 'c4', true, 1000)
        setcircle(svg2, 320, 'c5', true)
        setcircle(svg2, 550, 'c6', true, 4000)


    })
    //--------------------------------------    --------------------------------------------------------------------------

    function setcircle(svgname, down, classname = c1, type = false, time = 2000) {
        //定義畫布
        var picture = svgname.append('g').attr('class', 'circle').attr('transform', `translate(150,${down})`)
        //定義餅圖生成器
        var arcGenerator = d3.arc().innerRadius(30).outerRadius(80).startAngle(0);
        //背景圓
        var backGround = picture.append("path")
            .datum({ endAngle: 2 * Math.PI })
            .style("fill", "snow")
            .attr("d", arcGenerator);

        //顏色比例尺
        var colorLinear = d3.scaleLinear().domain([0, 100]).range(["#EEE685", "#EE3B3B"])
        var num
        //生產隨機數
        setnum()
        function setnum() {
            num = Math.random()
            num = num.toFixed(2) * 100
            if (num % 1 === 0) {
                return num
            } else {
                setnum()
            }
        }
        // console.log(num);
        //生產圖形
        var upperGround = picture.append('path')
            .datum({ endAngle: Math.PI * 2 * num / 100 })
            .attr('class', classname)
            .style('fill', '#FFC125')
            .attr('d', arcGenerator)
        //生產文字
        var dataText = picture.append('text')
            .text(num + '%')
            .attr('text-anchor', 'middle')
            .attr('dominant-baseline', 'middle')
            .attr('font-size', '17px')
            .attr('fill', 'white')
        if (type === true) {
            //定時器 定時更新圖形
            var aa = setInterval(function () {
                d3.select(`.${classname}`).transition().duration(750).attrTween('d', function (d) {
                    var compute = d3.interpolate(d.endAngle, Math.random() * Math.PI * 2);
                    return function (t) {
                        d.endAngle = compute(t);
                        var data = d.endAngle / Math.PI / 2 * 100;
                        //設置數值
                        dataText.text(data.toFixed(0) + '%');
                        //將新參數傳入，生成新的圓弧構造器
                        return arcGenerator(d);
                    }
                }).styleTween('fill', function (d) {
                    return function (t) {
                        var data = d.endAngle / Math.PI / 2 * 100;

                        //返回數值對應的色值
                        return colorLinear(data);
                    }
                })

            }, time)
            //將計時器添加到數組
            interarr.push(aa)
        }
    }

</script>

</html>