d3.js-V3制作简单的飞线图

d3.js制作简单的飞线图

简介

期末的一个小作业，放上来分享一下。若有不懂的地方欢迎在评论区提问~

最终效果图：

使用工具

• d3.js (V3版本)

步骤简介

1. 准备好数据。
2. 绘制一个中国地图。
3. 绘制飞线。

数据准备

数据来源

本次作业采用的是上海外国语大学2019年毕业生就业质量报告中的部分数据。

pdf中的数据如下：

代码中使用的数据如下：

//飞线的起始点数据
const dataset = [
    // {
   
    //     start: [121.4648, 31.2891],
    //     end: [121.4648, 31.2891],  //上海市
    //     name: "上海市",
    //     num: 100,
    // },
    {
   
        start: [121.4648, 31.2891],
        end: [113.4668, 22.8076],
        name: "广东省",
        num: 39,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [120.498, 29.0918],
        name: "浙江省",
        num: 21,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [118.3008, 25.9277],
        name: "福建省",
        num: 7,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [107.7539, 30.1904],
        name: "重庆市",
        num: 3,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [101.8652, 25.1807],
        name: "云南省",
        num: 3,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [88.7695, 31.6846],
        name: "西藏自治区",
        num: 2,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [108.2813, 23.6426],
        name: "广西壮族自治区",
        num: 2,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [117.5977, 44.3408],
        name: "内蒙古自治区",
        num: 1,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [126.4746, 43.5938],
        name: "吉林省",
        num: 1,
    },
    {
   
        start: [121.4648, 31.2891],
        end: [122.3438, 41.0889],
        name: "辽宁省",
        num: 1,
    },
]

Note：由于展示飞线的时候起点是上海，不便于展示上海到上海的飞线（起点与终点重合，且其数据量较大，不便于绘制飞线），故从全部数据中剔除了上海市的部分。

可视化构思

本作业希望通过飞线图的方式，展示2019届上海外国语大学本科毕业生去往“一带一路”沿线省份（除上海）就业情况，飞线的起点均设为上海，终点设为毕业生去向的省份，线条的粗细由人数决定。

飞线图能够优美、简洁地为我们展示上述信息。

绘制地图

地图数据获取

制作地图需要 JSON 文件，将 JSON 的格式应用于地理上的文件，叫做 GeoJSON 文件。在github上下载了一份前人制作好的中国地图的GeoJSON 文件，命名为 china.geo.json。其中部分数据展示如下：

{
   
    "type": "Feature",
    "id": "xin_jiang",
    "properties": {
   
        "name": "新疆",
        "cp": [84.9023, 41.748],
        "childNum": 18
    },
    "geometry": {
   
        "type": "Polygon",
        "coordinates": [[[96.416, 42.7588],[96.416, 42.7148],[95.9766, 42.4951],[96.0645, 42.3193],[96.2402, 42.2314],[95.9766, 41.9238],[95.2734, 41.6162],[95.1855, 41.792],[94.5703, 41.4844],[94.043, 41.0889],[93.8672, 40.6934],[93.0762, 40.6494],[92.6367, 39.6387],[92.373, 39.3311],[92.373, 39.1113],[92.373, 39.0234],[90.1758, 38.4961],[90.3516, 38.2324],[90.6152, 38.3203],[90.5273, 37.8369],[91.0547, 37.4414],[91.3184, 37.0898],[90.7031, 36.7822],[90.791, 36.6064],[91.0547, 36.5186],[91.0547, 36.0791],[90.8789, 36.0352],[90, 36.2549],[89.9121, 36.0791],[89.7363, 36.0791],[89.209, 36.2988],[88.7695, 36.3428],[88.5938, 36.4746],[87.3633, 36.4307],[86.2207, 36.167],[86.1328, 35.8594],[85.6055, 35.6836],