D3 Examples - china-map-dots

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
   <script src="https://cdn.bootcss.com/d3/5.15.1/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
    <title>China Map</title>
​
    <style>
        svg {
            border: 1px;
            border-color: gray;
            border-style: solid;
        }
​
        .hidden {
            display: none;
        }
​
        div.tooltip {
            color: #222;
            background: #fff;
            border-radius: 3px;
            box-shadow: 0px 0px 2px 0px #a6a6a6;
            padding: .2em;
            text-shadow: #f5f5f5 0 1px 0;
            opacity: 0.9;
            position: absolute;
        }
    </style>
​
</head>
​
<body>
    <div class="tooltip"></div>
    <script>
        let width = 1080
        let height = 720
        let svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(0,0)")
​
        let projection = d3.geoMercator()
            .center([104, 38])
            .scale(800)
            .translate([width / 2, height / 2])
​
        let path = d3.geoPath()
            .projection(projection)
​
        var tooltip = d3.select("div.tooltip");
        d3.json("china.json").then((geojson => {
​
            svg.append("path")
                .attr("d", path(geojson))
                .attr('fill', 'Lavender')
                .attr("stroke", "DarkGrey")
                .attr("stroke-width", 1)
​
            d3.csv("china_locations_utf8.csv").then((city => {
​
                let useData = city.map(d => {
                    return {
                        name: d.name,
                        latitude: +d.latitude,
                        longitude: +d.longitude
                    };
                });
                console.log(useData)
                //全部画在地图上
                svg.selectAll("circle")
                    .data(useData)
                    .enter()
                    .append("circle")
                    // .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; })
                    // .attr("cy", function (d) { return projection(d)[1]; })
                    .attr("cx", function (d) {
                        return projection([d.longitude, d.latitude])[0];
                    })
                    .attr("cy", function (d) {
                        return projection([d["longitude"], d["latitude"]])[1];
                    })
                    .attr("r", 4)
                    .attr("fill", d => {
                        if (d.name == "上海市" || d.name == "北京市" || d.name == "杭州市" || d.name == "深圳市" || d.name == "南京市" || d.name == "广州市" || d.name == "武汉市" || d.name == "厦门市" || d.name == "成都市" || d.name == "福州市") { return "red" } else { return "lightgrey" }
                    })
                    .on("mousemove", function (d) {
                        tooltip.classed("hidden", false)
                            .style("top", (d3.event.pageY) + "px")
                            .style("left", (d3.event.pageX + 10) + "px")
                            .html(d.name);
                        console.log(d.name);
                    })
                    .on("mouseout", function (d, i) {
                        d3.select(this)
                            .attr("stroke-width", 1);
                        tooltip.classed("hidden", true)
                    })
            }))
            // add circles to svg
​
            // points
            var data = [[116.39723, 39.9075], [116.39723, 36.9075]];
​
​
​
​
        }))
​
    </script>
​
    <!-- https://plnkr.co/edit/STLzvbc7EdTyBFG8VfzK?p=preview 借鉴可生成国内人口数据 -->
    <!-- 如果要配色，可以考虑：https://github.com/d3/d3-scale-chromatic -->
    <!-- 投影改变： https://github.com/d3/d3-geo-projection -->
    <!-- 一个很不错的中国地图数据，分省，分城市的，西藏包括藏南数据，https://github.com/yezongyang/china-geojson -->
</body>
​
</html>
    