地图

数据地图
数据地图

用于数据可视化的交互式地图。 捆绑成一个单一的Javascript文件。

数据映射旨在根据地理数据提供一些数据可视化。 它是基于SVG的,可以扩展到任何屏幕尺寸,并包含1个脚本文件内的所有内容。 它依赖于令人惊叹的D3.js库。 可以找到完整的文档: https://github.com/markmarkoh/datamaps

基本例子
var basic = new Datamap({
    element: document.getElementById("basic_map"),
    responsive: true,
    fills: {
        defaultFill: "#DBDAD6"
    },
    geographyConfig: {
        highlightFillColor: '#1C977A',
        highlightBorderWidth: 0,
    },
}); 
选择地区
var basic = new Datamap({
    element: document.getElementById("basic_map"),
    ...
    data: {
        USA: { fillKey: "active" },
        RUS: { fillKey: "active" },
        DEU: { fillKey: "active" },
        BRA: { fillKey: "active" }
    }
}); 
美国范围
var usa_map = new Datamap({
    element: document.getElementById("usa_map"),
    responsive: true,
    scope: 'usa',
    fills: {
        defaultFill: "#DBDAD6"
    },
    geographyConfig: {
        highlightFillColor: '#1C977A',
        highlightBorderWidth: 0,
    },
    ...
}); 
与弧映射
var arc_map = new Datamap({
    element: document.getElementById("arc_map"),
    ...
});

arc_map.arc(
[
    { origin: 'USA', destination: 'RUS'},
    { origin: 'USA', destination: 'DEU'},
    { origin: 'USA', destination: 'POL'},
    { origin: 'USA', destination: 'JAP'},
    { origin: 'USA', destination: 'AUS'},
    { origin: 'USA', destination: 'BRA'}
],
{ strokeColor: '#2BA587', strokeWidth: 1}
);