BIGEMPA Js API示例中心
交互式餅狀圖源代碼展示

代碼編輯區運行下載還原
<!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.kenshimo.com/reader/download/detail201802017.html
        -->
    <link href='http://www.kenshimo.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.kenshimo.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="http://www.kenshimo.com/Public/common/js/jquery.min.js"></script>
    <script src="http://www.kenshimo.com/Public/js/d3.min.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

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

    .left {
        position: absolute;
        z-index: 10;
        height: 100%;
          width: 600px;
        background-color: black;
        opacity: .5;
    }

    img {
        position: absolute;
        width: 26px;
        right: 2px;
    }

    .d3 {
        position: absolute;
        z-index: 10;
        top: 30px;
    }

    .svg1 {
        /* background: white; */
        border-radius: 50%;
        margin-top: 30px;
    }

    .toptitle {
        color: snow;
        font-size: 27px;
        text-align: center;
    }
</style>

<body>
    <div class="left">
        <span>
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACCCAMAAAC93eDPAAAAPFBMVEX///8AAAD4+Pjy8vJbW1v19fVYWFhERERVVVU9PT1SUlJgYGBPT09HR0dLS0vHx8eqqqrT09N2dnZwcHCtXMiCAAADmElEQVR4nO1b25aCMAwUar2vrvr//7q7R9BEm5ArZx+YV2sZ6DRhGFitFixYsGDBJK6Xkn2Icrkyv353v7j3mQT6+98xvlkGXXdKvBDl9DgGxaEbsE7jUNbjMdq/X8efu03SWvSb5yHaerg8f+/2KRz6/esIl+aI8hrQHRLWohzAAYj5b2BIvB5eOvjFjRjUQ5qH4LUQTl6PYFisHqAOumOlB6KLtQlci7IBE/OL3G/hUIasDhWe2nbi8vaQ7lcQh/oFL+7kApdjOAfE4ChY3roL3ptIYDvRSSE9+Gs1WtopHTz/FLk38W4UT4b04OvdY3cW62BEhX/06AHp4KQSdw852Gs1qson5TQhtVpcldtAetiZ1qLA7a3RwQhcqw0TFE1VJjjAkzirL2M9w8toXEqkh62SQ4UXUa+DEajF6nq3468YuFYrTqVaqjLBAUlKzAGtwtpZ4tHePAsvaIFKtOxGjAoLnGxvot14CLjl6LWbC2/mkJtgZe82dmceSA9TPgt5Jr8ORqC14PWAdBCzCgMHadMNavItCHu3szvzEPkshWeyQOCzVJ7JxGHKZyk9kwUTPkvtmSxgfZbBM1nA+CyTZzJxoPZmSlVug/BZZs9kQdNnOTyTBY0S7PJMFnzU6tSq3Mabz3J7Jgtwrc6uygQHeOLwkszG4E0PM+tgBGrLAyIflUqA9DCzDp4c1piB1zNZgPUwrw4GoKqcmGfReN+Yc27IgcG+e0NOnkUDeaYBGXkWw2D9yWBePaCGDTBHox4YoO6cl2fRwJ6p1qw8i8aHZ0rKsxgGn54pJc8SMhjvkRLyLBqEZwrPs2iQnik4z2IY0J4pNM+iwXqmwDyLYcB7prA8i8akZ0p81DUcYNozJb578AeRZwrIsxgGMs/kzrNoiHMmZ57FMJDnTK48i4YqZwoLpSCUOZM5z2IYaHMmY55Fw5AzmfIsZjpLzmTIs2gYcyZ1nsVMZX2iGda7HTmTKs9ipvHkTIo8i5nE13wDHoi6n2i6e3dAzuR8bzAkZ3L5rKCcyeGzwnIms88KzJmMPis0ZzL5rOCcyVCrw3Mmtc9KyJmUPislZ1KV+qScSVGr03Imsc8KeDePgtBnBd5uNSYX3QLek1bhAbQWd2IMGJLxCBO1//b84EOVnJwJ6qH9ocrrc52snAn4LOLzrTwdjHjpgRgwfLoV8W4ehTrx6daDwy33A7Yby2D1Dz7jW7BgwYIFA34AFNccG0zpySgAAAAASUVORK5CYII="
                alt="">
        </span>
        <div class="toptitle">

        </div>
    </div>
    <div class="d3">

    </div>
    <div id='map'></div>
</body>
<script>
    //軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
    BM.Config.HTTP_URL = 'http://www.kenshimo.com:9000';
    // 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.zhongkexingtu，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
    var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 4, zoomControl: true });
    $.get('/Public/offline/chad/510000.geojson', function (data) {
        data = JSON.parse(data);
        var all = ["#f7acbc", "#deab8a", "#817936", "#444693", "#ef5b9c", "#fedcbd", "#7f7522", "#2b4490", "#feeeed", "#f47920", "#80752c", "#2a5caa", "#f05b72", "#905a3d", "#87843b", "#224b8f", "#f15b6c", "#8f4b2e", "#726930", "#003a6c", "#f8aba6", "#87481f", "#454926", "#102b6a", "#f69c9f", "#5f3c23", "#2e3a1f", "#426ab3", "#f58f98", "#6b473c", "#4d4f36", "#46485f", "#ca8687", "#faa755", "#b7ba6b", "#4e72b8", "#f391a9", "#fab27b", "#b2d235", "#181d4b", "#bd6758", "#f58220", "#5c7a29", "#1a2933", "#d71345", "#843900", "#bed742", "#121a2a", "#d64f44", "#905d1d", "#7fb80e", "#0c212b", "#d93a49", "#8a5d19", "#a3cf62", "#6a6da9", "#b3424a", "#8c531b", "#769149", "#585eaa", "#c76968", "#826858", "#6d8346", "#494e8f", "#bb505d", "#64492b", "#78a355", "#afb4db", "#987165", "#ae6642", "#abc88b", "#9b95c9", "#ac6767", "#56452d", "#74905d", "#6950a1", "#973c3f", "#96582a", "#cde6c7", "#6f60aa", "#b22c46", "#705628", "#1d953f", "#867892", "#a7324a", "#4a3113", "#77ac98", "#918597", "#aa363d", "#412f1f", "#007d65", "#6f6d85", "#ed1941", "#845538", "#84bf96", "#594c6d", "#f26522", "#8e7437", "#45b97c", "#694d9f", "#d2553d", "#69541b", "#225a1f", "#6f599c", "#b4534b", "#d5c59f", "#367459", "#8552a1", "#ef4136", "#cd9a5b", "#007947", "#543044", "#c63c26", "#cd9a5b", "#40835e", "#63434f", "#f3715c", "#b36d41", "#2b6447", "#7d5886", "#a7573b", "#df9464", "#005831", "#401c44", "#aa2116", "#b76f40", "#006c54", "#472d56", "#b64533", "#ad8b3d", "#375830", "#45224a", "#b54334", "#dea32c", "#274d3d", "#411445", "#853f04", "#d1923f", "#375830", "#4b2f3d", "#840228", "#c88400", "#27342b", "#402e4c", "#7a1723", "#c37e00", "#65c294", "#c77eb5", "#a03939", "#c37e00", "#73b9a2", "#ea66a6", "#8a2e3b", "#e0861a", "#72baa7", "#f173ac", "#8e453f", "#ffce7b", "#005344", "#fffffb", "#8f4b4a", "#fcaf17", "#122e29", "#fffef9", "#892f1b", "#ba8448", "#293047", "#f6f5ec", "#6b2c25", "#896a45", "#00ae9d", "#d9d6c3", "#733a31", "#76624c", "#508a88", "#d1c7b7", "#54211d", "#6d5826", "#70a19f", "#f2eada", "#78331e", "#ffc20e", "#50b7c1", "#d3d7d4", "#53261f", "#fdb933", "#00a6ac", "#999d9c", "#f15a22", "#d3c6a6", "#78cdd1", "#a1a3a6", "#b4533c", "#c7a252", "#008792", "#9d9087", "#84331f", "#dec674", "#94d6da", "#8a8c8e", "#f47a55", "#b69968", "#afdfe4", "#74787c", "#f15a22", "#c1a173", "#5e7c85", "#7c8577", "#f3704b", "#dbce8f", "#76becc", "#72777b", "#da765b", "#ffd400", "#90d7ec", "#77787b", "#c85d44", "#ffd400", "#009ad6", "#4f5555", "#ae5039", "#ffe600", "#145b7d", "#6c4c49", "#6a3427", "#f0dc70", "#11264f", "#563624", "#8f4b38", "#fcf16e", "#7bbfea", "#3e4145", "#8e3e1f", "#decb00", "#33a3dc", "#3c3645", "#f36c21", "#cbc547", "#228fbd", "#464547", "#b4532a", "#6e6b41", "#2468a2", "#130c0e", "#b7704f", "#596032", "#2570a1", "#281f1d", "#de773f", "#525f42", "#2585a6", "#2f271d", "#c99979", "#5f5d46", "#1b315e", "#1d1626"];
        BM.geoJSON(data, {
            style: function () {
                return { color: 'white', fillColor: all[Math.floor(Math.random() * all.length)], weight: 1, fillOpacity: 0.9 };
            },
            //逐個綁定事件
            onEachFeature: function (feature, layer) {
                feature.properties && feature.properties.name && layer.bindTooltip(feature.properties.name, { direction: 'bottom', className: 'my_tooltip', permanent: true });
                  if (feature.properties.name == '成都市') {
                    drawarc(feature)
                } 
                layer.on('click', function () {
                    $('.toptitle').html(feature.properties.name + "XXXXXX數據展示")
                    if ($('.left').css('width') == '0px') {
                        $(".left").animate({ width: 600 }, 1000)
                    }
                    setTimeout(function () {
                        d3.selectAll('.svg1').remove()
                        console.log(feature.properties.name);
                        var height = 600
                        var width = 600
                        //開始繪制餅狀圖
                        //獲取數據
                        var data = $.get('/Public/d3json/bb.json', function (data) {
                            console.log(data);
                            //處理數據
                            partition = data => {
                                const root = d3.hierarchy(data)
                                    .sum(d => d.value)
                                    .sort((a, b) => b.value - a.value);
                                return d3.partition()
                                    .size([2 * Math.PI, root.height + 1])
                                    (root);
                            }
                            //顏色比例尺
                            color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
                            //格式化
                            format = d3.format(",d")
                            //半徑
                            radius = width / 6
                            //圓生成器
                            arc = d3.arc()
                                .startAngle(d => d.x0)
                                .endAngle(d => d.x1)
                                .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
                                .padRadius(radius * 1.5)
                                .innerRadius(d => d.y0 * radius)
                                .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
                            var root = partition(data);
                            root.each(d => d.current = d);
                            //創建一個svg圖像
                            var svg = d3.select('.d3').append('svg').attr('height', height).attr('width', width).style("font", "10px sans-serif").attr('class', 'svg1');
                            var g = svg.append("g").attr("transform", `translate(${width / 2},${width / 2})`);
                            var path = g.append("g")
                                .selectAll("path")
                                .data(root.descendants().slice(1))
                                .join("path")
                                .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
                                .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.9 : 0.6) : 0)
                                .attr("d", d => arc(d.current));
                            //點擊圖形
                            path.filter(d => d.children)
                                .style("cursor", "pointer")
                                .on("click", clicked);
                            path.append("title")
                                .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
                            var label = g.append("g")
                                .attr("pointer-events", "none")
                                .attr("text-anchor", "middle")
                                .style("user-select", "none")
                                .selectAll("text")
                                .data(root.descendants().slice(1))
                                .join("text")
                                .attr("dy", "0.35em")
                                .attr("fill-opacity", d => +labelVisible(d.current))
                                .attr("transform", d => labelTransform(d.current))
                                .text(d => d.data.name);
                            //添加原形
                            var parent = g.append("circle")
                                .datum(root)
                                .attr("r", radius)
                                .attr("fill", "none")
                                .attr("pointer-events", "all")
                                .on("click", clicked);
                            //點擊事件
                            function clicked(p) {
                                parent.datum(p.parent || root);

                                root.each(d => d.target = {
                                    x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
                                    x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
                                    y0: Math.max(0, d.y0 - p.depth),
                                    y1: Math.max(0, d.y1 - p.depth)
                                });

                                const t = g.transition().duration(750);

                                // Transition the data on all arcs, even the ones that aren’t visible,
                                // so that if this transition is interrupted, entering arcs will start
                                // the next transition from the desired position.
                                //過度效果
                                path.transition(t)
                                    .tween("data", d => {
                                        const i = d3.interpolate(d.current, d.target);
                                        return t => d.current = i(t);
                                    })
                                    .filter(function (d) {
                                        return +this.getAttribute("fill-opacity") || arcVisible(d.target);
                                    })
                                    .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.9 : 0.6) : 0)
                                    .attrTween("d", d => () => arc(d.current));

                                label.filter(function (d) {
                                    return +this.getAttribute("fill-opacity") || labelVisible(d.target);
                                }).transition(t)
                                    .attr("fill-opacity", d => +labelVisible(d.target))
                                    .attrTween("transform", d => () => labelTransform(d.current));
                            }
                            function arcVisible(d) {
                                return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;
                            }

                            function labelVisible(d) {
                                return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
                            }

                            function labelTransform(d) {
                                const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
                                const y = (d.y0 + d.y1) / 2 * radius;
                                return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
                            }
                        })
                    }, 1000)

                })
            }
            //鼠標移入
        }).on('mouseover', function (e) {
            e.layer.setStyle({ color: 'white', fillColor: 'red', weight: 1, fillOpacity: 0.9 });
            //鼠標移出
        }).on('mouseout', function (e) {
            e.layer.setStyle({ color: 'white', fillColor: all[Math.floor(Math.random() * all.length)], weight: 1, fillOpacity: 0.9 });
        }).addTo(map);
    })
    //點擊X 圖片的事件
    $("span").on('click', function () {
        d3.selectAll('.svg1').remove()
        $(".left").animate({ width: 0 }, 500)
    })
  function drawarc(feature) {
        $('.toptitle').html(feature.properties.name + "XXXXXX數據展示")
        d3.selectAll('.svg1').remove()
        console.log(feature.properties.name);
        var height = 600
        var width = 600
        //開始繪制餅狀圖
        //獲取數據
        var data = $.get('/Public/d3json/bb.json', function (data) {
            console.log(data);
            //處理數據
            partition = data => {
                const root = d3.hierarchy(data)
                    .sum(d => d.value)
                    .sort((a, b) => b.value - a.value);
                return d3.partition()
                    .size([2 * Math.PI, root.height + 1])
                    (root);
            }
            //顏色比例尺
            color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
            //格式化
            format = d3.format(",d")
            //半徑
            radius = width / 6
            //圓生成器
            arc = d3.arc()
                .startAngle(d => d.x0)
                .endAngle(d => d.x1)
                .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
                .padRadius(radius * 1.5)
                .innerRadius(d => d.y0 * radius)
                .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))
            var root = partition(data);
            root.each(d => d.current = d);
            //創建一個svg圖像
            var svg = d3.select('.d3').append('svg').attr('height', height).attr('width', width).style("font", "10px sans-serif").attr('class', 'svg1');
            var g = svg.append("g").attr("transform", `translate(${width / 2},${width / 2})`);
            var path = g.append("g")
                .selectAll("path")
                .data(root.descendants().slice(1))
                .join("path")
                .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
                .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.9 : 0.6) : 0)
                .attr("d", d => arc(d.current));
            //點擊圖形
            path.filter(d => d.children)
                .style("cursor", "pointer")
                .on("click", clicked);
            path.append("title")
                .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
            var label = g.append("g")
                .attr("pointer-events", "none")
                .attr("text-anchor", "middle")
                .style("user-select", "none")
                .selectAll("text")
                .data(root.descendants().slice(1))
                .join("text")
                .attr("dy", "0.35em")
                .attr("fill-opacity", d => +labelVisible(d.current))
                .attr("transform", d => labelTransform(d.current))
                .text(d => d.data.name);
            //添加原形
            var parent = g.append("circle")
                .datum(root)
                .attr("r", radius)
                .attr("fill", "none")
                .attr("pointer-events", "all")
                .on("click", clicked);
            //點擊事件
            function clicked(p) {
                parent.datum(p.parent || root);

                root.each(d => d.target = {
                    x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
                    x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
                    y0: Math.max(0, d.y0 - p.depth),
                    y1: Math.max(0, d.y1 - p.depth)
                });

                const t = g.transition().duration(750);

                // Transition the data on all arcs, even the ones that aren’t visible,
                // so that if this transition is interrupted, entering arcs will start
                // the next transition from the desired position.
                //過度效果
                path.transition(t)
                    .tween("data", d => {
                        const i = d3.interpolate(d.current, d.target);
                        return t => d.current = i(t);
                    })
                    .filter(function (d) {
                        return +this.getAttribute("fill-opacity") || arcVisible(d.target);
                    })
                    .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.9 : 0.6) : 0)
                    .attrTween("d", d => () => arc(d.current));

                label.filter(function (d) {
                    return +this.getAttribute("fill-opacity") || labelVisible(d.target);
                }).transition(t)
                    .attr("fill-opacity", d => +labelVisible(d.target))
                    .attrTween("transform", d => () => labelTransform(d.current));
            }
            function arcVisible(d) {
                return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0;
            }

            function labelVisible(d) {
                return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03;
            }

            function labelTransform(d) {
                const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
                const y = (d.y0 + d.y1) / 2 * radius;
                return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
            }
        })
    }

</script>

</html>