数据图中的空弧

Question

尝试在 Datamaps 的地图上绘制弧线时，如下所示：https://datamaps.github.io/

我得到一个空弧，使用以下代码并在此处显示：http://jsfiddle.net/yausern/qbgewhss/1/

var map = new Datamap(
    {
        element: document.getElementById('container'),
        fills: {
            defaultFill: "#ABDDA4",
            win: '#0fa0fa'
        },
        data: {
            'CHN': { fillKey: 'win' },
            'SWE': { fillKey: 'win' },

        }
    }
);
map.arc(
    [
        {
            origin: 'CHN',
            destination: 'SWE',
            options: {
                strokeWidth: 2,
                strokeColor: 'rgba(100, 10, 200, 0.4)',
                greatArc: true
            }

        }
    ],
    {
        strokeWidth: 1, arcSharpness: 1.4
    }

)

我在这里错过了什么？

Answer 1

根据 API，arcs 插件似乎接受国家名称。我尝试了几种方法，从使用 scope:'world' 到引用插件，但都没有成功。

无论如何，这听起来可能不是您的解决方案，但您始终可以使用纬度和经度：

{
  origin: {
      latitude: 60.1282,
      longitude: 18.6435
  },
  destination: {
      latitude: 35.8617,
      longitude: 104.1954
}

这是fiddle：http://jsfiddle.net/gerardofurtado/59seachL/

Answer 2

使用此处找到的高分辨率版本时有效：https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.hires.min.js

虽然我无法在 JSFiddle 中使用它，但在控制台中收到以下错误消息：

Refused to execute script from 'https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.hires.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

当我下载脚本并在本地引用它时，它在使用 Python 3 的 http.server

时有效

数据图中的空弧

Empty arc in Datamaps

d3.js

datamaps