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.bigemap.com/reader/download/detail201802017.html
        -->
    <link href='http://www.bigemap.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.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
    <script src="http://www.bigemap.com/Public/js/d3.min.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

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

    .d3 {
        width: 500px;
        height: 500px;
        z-index: 10;
        /* background-color: rosybrown; */
    }

    #zhemu {
        width: 600px;
        height: 100%;
        opacity: .9;
        background-color: black;
        position: absolute;
        z-index: 10;
    }
</style>

<body>
    <div id="map"></div>
    <div id="zhemu">
        <div class="d3"></div>
    </div>
</body>
<script>
    //软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
    BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
    // 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.zhongkexingtu，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
    var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 4, zoomControl: true });

    var marker = BM.marker([30, 104]).addTo(map)
    getdata()
    // 获取数据
    function getdata() {
        $.get('/Public/d3json/flare-2.json', function (data) {
            var height = 700
            var width = 600
            console.log(data);
            //处理数据
            treemap = data => d3.treemap()
                .size([width, height])
                .padding(1)
                .round(true)
                (d3.hierarchy(data)
                    .sum(d => d.value)
                    .sort((a, b) => b.value - a.value))
            //定义格式化
            format = d3.format(",d")
            //颜色比例尺
            color = d3.scaleOrdinal(d3.schemeCategory10)

            var root = treemap(data);
            //添加svg图层
            var svg = d3.select('.d3').append('svg').attr('height', height).attr('width', width)
            //添加图层分组
            const leaf = svg.selectAll("g")
                .data(root.leaves())
                .join("g")
                .attr("transform", d => `translate(${d.x0},${d.y0})`);
            leaf.append("title")
                .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);
            leaf.append("rect")
                // .attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
                .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
                .attr("fill-opacity", 0.6)
                .attr("width", d => d.x1 - d.x0)
                .attr("height", d => d.y1 - d.y0);
            leaf.append("clipPath")
                // .attr("id", d => (d.clipUid = DOM.uid("clip")).id)
                .append("use")
            // .attr("xlink:href", d => d.leafUid.href);
            leaf.append("text")
                .attr("clip-path", d => d.clipUid)
                .selectAll("tspan")
                .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
                .join("tspan")
                .attr("x", 3)
                .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
                .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
                // .attr('font-size', '5')
                .text(d => d);
        })
    }

</script>

</html