地图

在数据可视化中，地图是很重要的一部分。很多情况会与地图有关联，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。

地图数据的获取

制作地图需要 JSON 文件，将 JSON 的格式应用于地理上的文件，叫做 GeoJSON 文件。本文就是用这种文件绘制地图。

那么如何获取中国地图的 GeoJSON 文件呢? 如下链接,打开并下载至本地，并命名为ChinaGeoFull.json ,后面实现会用到。

https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json

投影函数

由于 GeoJSON 文件中的地图数据，都是经度和纬度的信息。它们都是三维的，而要在网页上显示的是二维的，所以要设定一个投影函数来转换经度纬度。如：

var projection = d3.geoMercator()
      .center([107, 31])
      .scale(850)
      .translate([width/2, height/2]);

文档： https://www.d3js.org.cn/document/d3-geo/#projections

其中，

center() 设定地图的中心位置，[107,31] 指的是经度和纬度。
scale() 设定放大的比例。
translate() 设定平移。

地理路径生成器

为了根据地图的地理数据生成 SVG 中 path 元素的路径值，需要用到d3. geoPath([ projection [, context ]) ，称它为地理路径生成器。

文档： https://www.d3js.org.cn/document/d3-geo/#paths

使用默认的设置创建一个新的地理路径生成器. 如果指定了 projection , 则设置当前投影 . 如果指定了 context 则设置当前当前上下文 .

var path = d3.geoPath(projection)

向服务器请求文件并绘制地图

 d3.json("./ChinaGeoFull.json").then(function(data){
        console.log(data)
        svg.selectAll("g")
            .data(data.features)
            .enter()
            .append("g")
            .append("path")
            .attr('d',path)//使用地理路径生成器
            .attr("stroke","#000")
            .attr("stroke-width",1)
            .attr("fill", function(d,i){
                return color[i%10];
            .on("mouseover",function(d,i){
                d3.select(this).attr("fill","yellow");
            .on("mouseout",function(d,i){
                d3.select(this).attr("fill",color(i));
      //添加坐标
      svg.selectAll("g")
         .append('text')
         .attr('font-size', 12)
         .attr('text-anchor', 'middle')
         .attr('x', d => {
          var position = projection(d.properties.centroid || [0, 0]);
          return position[0];
         .attr('y', d => {
          var position = projection(d.properties.centroid || [0, 0]);
          return position[1];
        .attr('dy', d => {
        //澳门和香港重合了，挤到一起了
          if (d.properties.name === '澳门') {
            return 15;
        .text(d => d.properties.name);
      })

完整代码

<body>
    <svg width="1000" height="1000"></svg>
    <script>
      var marge = {top:60,bottom:60,left:60,right:60}
      var svg = d3.select("svg")
      var width = svg.attr("width")
      var height = svg.attr("height")
      var g = svg.append("g").attr("transform","translate("+marge.top+","+marge.left+")");
      //投影函数
      var projection = d3.geoMercator()
      .center([107, 31])
      .scale(800)
      .translate([width/2, height/2]);
      var path = d3.geoPath(projection);
      var color = d3.schemeCategory10;
      d3.json("./ChinaGeoFull.json").then(function(data){
        console.log(data)
        svg.selectAll("g")
            .data(data.features)
            .enter()
            .append("g")
            .append("path")
            .attr('d',path)//使用地理路径生成器
            .attr("stroke","#000")
            .attr("stroke-width",1)
            .attr("fill", function(d,i){
                return color[i%10];
            .on("mouseover",function(d,i){
                d3.select(this).attr('opacity', 0.5);
            .on("mouseout",function(d,i){
                d3.select(this).attr('opacity', 1);
      //添加坐标
      svg.selectAll("g")
         .append('text')
         .attr('font-size', 12)
         .attr('text-anchor', 'middle')
         .attr('x', d => {
          var position = projection(d.properties.centroid || [0, 0]);
          return position[0];
         .attr('y', d => {
          var position = projection(d.properties.centroid || [0, 0]);
          return position[1];
        .attr('dy', d => {
        //这里为什么这么写呢，因为澳门和香港重合了，挤到一起了。
          if (d.properties.name === '澳门') {
            return 15;
        .text(d => d.properties.name);
    </script>
</body>

Qt开发技术：Q3D图表开发笔记（二）：Q3DBar三维柱状图介绍、Demo以及代码详解

qt提供了q3d进行三维开发，虽然这个框架没有得到大量运用也不是那么成功，性能上也有很大的欠缺，但是普通的点到为止的应用展示还是可以的。其中就包括华丽绚烂的三维图表，数据量不大的时候是可以使用的。上一篇介绍了基础的q3d散点图，本篇介绍基础的柱状图。

基于Leaflet.draw的gis图形标绘实战

本文将通过编码的方式讲解如何引入Leaflet.draw组件，并绘制点、线、面、圆对象，同时可以计算线的距离，面积，圆半径和点的经纬度等信息。通过本文可了解基本操作，可以基于leaflet扩展相关的绘制组件，为空间检索等

快速绘制动态排序图 — Pyecharts 高级组件 Timeline 实现！

之前写过一篇关于Python 制作动态排序图的教程，里面利用的是 Matplotlib 中的 animation 函数，文章内容可参考动态排序图的详细制作教程，动态排序图的最终部分效果如下：

【D3.js 学习总结】5、D3 SVG图表示例

之前有说到“D3制作图表的过程就是将各种SVG图形拼接在一起的过程”，具体来说折线图表就是`折线图`+`坐标轴`的组合，面积图是`折线图`+`坐标轴`+`面积图` 一个完整的SVG图表，是包含了各种数据、SVG图形、样式、交互组成的组合体，我们以面积图表来做一个示例展示： ## CSS font-size: 12px;