init

xiaolingis · Oct 17, 2019 · 2bd31d7 · 2bd31d7
commit 2bd31d7
Show file tree

Hide file tree

Showing 29 changed files with 100,393 additions and 0 deletions.
diff --git a/1.1.1-svg-contours.html b/1.1.1-svg-contours.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<svg width="600" height="600"  stroke="#fff"  stroke-width="0.5"></svg>
+<script src="lib/d3.v4.min.js"></script>
+<script src="lib/d3-contour.v1.min.js"></script>
+<head>
+    <meta charset="UTF-8">
+    <title>d3-contours</title>
+</head>
+<body>
+<script>
+
+    var svg = d3.select("svg"),
+        width = +svg.attr("width"),
+        height = +svg.attr("height");
+
+    //生成随机数据
+    var data =[];
+    for(var i = 0;i<30;i++){
+        data.push({
+            x      :Math.round(Math.abs(d3.randomNormal(0,width)())),
+            y      :Math.round(Math.abs(d3.randomNormal(0,height)())),
+            value  :Math.random() * 10
+        });
+    };
+
+    var s = new Date().getTime();
+    var values = idw(data,width,height);
+    var e = new Date().getTime();
+    console.log('插值：'+(e-s)/1000+'秒');
+
+    var s1 = new Date().getTime();
+    var thresholds = 12;
+
+    var contours = d3.contours()
+        .size([width, height])
+        .thresholds(thresholds);
+
+    var color = d3.scaleLinear()
+        .domain([1,10])
+        .range(["green", "red"]);
+
+    //绘制等高线
+    svg.selectAll("path")
+        .data(contours(values))
+        .enter().append("path")
+        .attr("d", d3.geoPath(d3.geoIdentity()))
+        .attr("fill", function(d) {
+            return color(d.value);
+        });
+
+    //绘点
+    svg.append("g")
+        .attr("stroke", "red")
+        .selectAll("circle")
+        .data(data)
+        .enter().append("circle")
+        .attr("cx", function(d) { return d.x; })
+        .attr("cy", function(d) { return d.y; })
+        .attr("r", 2);
+
+    //绘标签
+    svg.append("g")
+        .attr("stroke", "white")
+        .selectAll("text")
+        .data(data)
+        .enter().append("text")
+        .attr("x", function(d) {
+            return d.x;})
+        .attr("y", function(d) {
+            return d.y;})
+        .style("size",2)
+        .style("font-style","宋体")
+        .text(function (d) {
+            return Math.round(d.value)
+        });
+
+    var e1 = new Date().getTime();
+    console.log('绘制：'+(e1-s1)/1000+'秒');
+
+    //idw 插值算法
+    function idw(data, width, height) {
+
+        var d = data;
+
+        //已有点初始二维数组
+        var dlen = d.length;
+        var matrixData = new Array(width * height);
+        for(var i = 0; i < dlen; i++) {
+            var point  = d[i];
+            matrixData[point.y * width +point.x] = point.value;
+        }
+
+        /**
+         * 插值矩阵数据,时间复杂度O(height*width*len)
+         * 当height = 356, width = 673, len = 26时为6229288
+         */
+        for(var i = 0,k1=0; i < height  ; i++) {
+            for(var j = 0; j <width ; j++,k1++) {
+                if(!matrixData[k1]) {
+                    var sum0 = 0, sum1 = 0;
+                    for(var k = 0; k < dlen; k++) {
+                        var dk = d[k];
+                        var dis = ((i-dk.y)*(i-dk.y) + (j-dk.x)*(j-dk.x));
+                        sum0 =   sum0 +  dk.value*1/dis;
+                        sum1 = sum1 +    1/dis;
+                    }
+                    if(sum1 != 0)
+                        matrixData[k1] = sum0/sum1;
+                    else
+                        matrixData[k1] = 1;
+                }
+            }
+        }
+
+        return matrixData;
+    }
+
+</script>
+</body>
+</html>
diff --git a/1.1.2-canvas-contours.html b/1.1.2-canvas-contours.html
@@ -0,0 +1,85 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<canvas width="960" height="500"></canvas>
+
+<script src="lib/d3.v4.min.js"></script>
+<script src="lib/d3-contour.v1.min.js"></script>
+<script src="lib/dat.gui.min.js"></script>
+<script src="js/contour2.js"></script>
+
+<head>
+    <meta charset="UTF-8">
+    <title>contour</title>
+</head>
+<body>
+<script>
+
+    var canvas = document.querySelector("canvas"),
+        width = 960,
+        height = 500,
+        context = canvas.getContext("2d");
+
+    var  mode = {};
+
+    mode.mapType        = 'heatmap';
+    mode.heatmap_line   = false;
+    mode.contour_isfull = false;
+    mode.drawpoint      = false;
+    mode.drawlable      = false;
+    mode.referenceValue = 5;
+    mode.mapAlpha       = 0.4;
+    mode.mapThresholds  = 10;
+
+
+    var co = new Psdb.Contour(context,width,height);
+
+    // GUI
+    var gui = new dat.GUI();
+
+    // 下拉框形式选择文案
+    gui.add(mode, 'mapType', [ 'heatmap', 'contour' ]).onChange( function () {
+        co.refreshMap(mode);
+    });
+
+    gui.add( mode, 'heatmap_line' ).onChange( function () {
+        co.refreshMap(mode);
+    });
+    gui.add( mode, 'contour_isfull' ).onChange( function () {
+        co.refreshMap(mode);
+    });
+
+    gui.add( mode, 'drawpoint' ).onChange( function () {
+        co.refreshMap(mode);
+    });
+    gui.add( mode, 'drawlable' ).onChange( function () {
+        co.refreshMap(mode);
+    });
+
+    gui.add( mode, 'referenceValue' , 2, 9).onChange( function () {
+        co.refreshMap(mode);
+    });
+    gui.add( mode, 'mapAlpha', 0.1, 1.0 ).onChange(function () {
+        co.refreshMap(mode);
+    });
+    gui.add( mode, 'mapThresholds', 5, 20 ).onChange(function () {
+        co.refreshMap(mode);
+    });
+
+
+    //生成随机数据
+    var data =[];
+    for(var i = 0;i<30;i++){
+        data.push({
+            x      :Math.round(Math.abs(d3.randomNormal(0,width)())),
+            y      :Math.round(Math.abs(d3.randomNormal(0,height)())),
+            value  :Math.random() * 10
+        });
+    };
+    co.initMap(mode,data);
+
+
+
+</script>
+</body>
+</html>
diff --git a/2.1.1-canvas-map.html b/2.1.1-canvas-map.html
@@ -0,0 +1,39 @@
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<script src="lib/d3.v4.min.js"></script>
+<script src="lib/topojson.v1.min.js"></script>
+<script>
+
+    var width = 1300,
+        height = 800;
+
+    //定义一个地图映射
+    var projection = d3.geoMercator()
+            .center([100, 37])
+            .scale(850)
+            .translate([width/2, height/2]);
+
+    //在页面中插入一个canvas元素，并设置宽高
+    var canvas = d3.select("body").append("canvas")
+            .attr("width", width)
+            .attr("height", height);
+
+    //获得canvas绘图上下文
+    var context = canvas.node().getContext("2d");
+
+    //定义一个路径生成器
+    var mapPath = d3.geoPath()
+            .projection(projection)
+            .context(context);
+
+    //加在数据开始渲染地图
+    d3.json("data/china.topojson", function(error, us) {
+        if (error) throw error;
+        //一次性绘制整个地图轮廓
+        mapPath(topojson.feature(us, us.objects.collection));
+        context.stroke();
+    });
+
+</script>
diff --git a/2.1.2-canvas-map.html b/2.1.2-canvas-map.html
@@ -0,0 +1,47 @@
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<script src="lib/d3.v4.min.js"></script>
+<script src="lib/topojson.v1.min.js"></script>
+<script>
+
+    var width = 1300,
+        height = 800;
+
+    var projection = d3.geoMercator()
+            .center([100, 37])
+            .scale(850)
+            .translate([width/2, height/2]);
+
+    var canvas = d3.select("body").append("canvas")
+            .attr("width", width)
+            .attr("height", height);
+
+    var context = canvas.node().getContext("2d");
+
+    var mapPath = d3.geoPath()
+            .projection(projection)
+            .context(context);
+
+    var mapColor =d3.scaleOrdinal(d3.schemeCategory20);
+
+    d3.json("data/china.topojson", function(error, us) {
+        if (error) throw error;
+
+        var countries = topojson.feature(us, us.objects.collection);
+        countries.features.forEach(drawMapPath);
+    });
+
+    function drawMapPath(d) {
+        context.beginPath();
+        var color = mapColor(parseInt(d.properties.id) );
+        context.fillStyle= color;
+        context.strokeStyle=color;
+        context.globalAlpha=0.3;
+        mapPath(d);
+        context.stroke();
+        context.fill();
+    }
+
+</script>
diff --git a/2.1.3-canvas-map-zoom.html b/2.1.3-canvas-map-zoom.html
@@ -0,0 +1,75 @@
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<script src="lib/d3.v4.min.js"></script>
+<script src="lib/topojson.v1.min.js"></script>
+<script>
+
+    var width = 1300,
+        height = 800;
+
+    var projection = d3.geoMercator()
+            .center([100, 37])
+            .scale(850)
+            .translate([width/2, height/2]);
+
+    var canvas = d3.select("body").append("canvas")
+            .attr("width", width)
+            .attr("height", height);
+
+    var transform = d3.zoomIdentity;
+
+    //当地图缩放后，获得缩放变换，重新渲染地图
+    function zoomed() {
+        transform = d3.event.transform;
+        render();
+    }
+
+    var context = canvas.node().getContext("2d");
+
+    var mapPath = d3.geoPath()
+            .projection(projection)
+            .context(context);
+
+    //给地图添加缩放范围和监听事件
+    canvas
+            .call(d3.zoom().scaleExtent([1, 36]).on("zoom", zoomed));
+
+    var mapColor =d3.scaleOrdinal(d3.schemeCategory20);
+    var countries =null;
+
+    d3.json("data/china.topojson", function(error, us) {
+        if (error) throw error;
+        countries = topojson.feature(us, us.objects.collection);
+        render()
+    });
+
+    //在渲染程序中，对绘图上下文整体应用变换
+    function render() {
+        context.save();
+        context.clearRect(0, 0, width, height);
+        context.beginPath();
+        context.translate(transform.x, transform.y);
+        context.scale(transform.k, transform.k);
+        context.lineWidth=0.1;
+        context.globalAlpha=0.3;
+
+        countries.features.forEach(drawMapPath);
+
+        context.stroke();
+        context.fill();
+        context.restore();
+    }
+
+    function drawMapPath(d) {
+        context.beginPath();
+        var color = mapColor(parseInt(d.properties.id) );
+        context.fillStyle= color;
+        context.strokeStyle=color;
+        mapPath(d);
+        context.stroke();
+        context.fill();
+    }
+
+</script>