将国家/地区信息添加到世界地图

时间:2018-12-12 15:54:08

标签: javascript vega

基于airports demomap example具有以下配置的示例,我在Vega 2.6.5上具有以下配置的世界地图:

{
      width: 900,
      height: 560,
      padding: {top: 0, left: 100, right: 100, bottom: 0},
      data: [
        {
          name: 'world',
          url: 'app/common/libs/charts/chartsData/world-110m.json',
          format: { type: 'topojson', feature: 'countries' },
          transform: [
            {
              type: 'geopath',
              projection: 'mercator',
              scale: 140, 
              translate: [450,280]
            }
          ]
        }, 
        {
          name: 'countriesLocation',
          url: 'app/common/libs/charts/chartsData/countries.csv',
          format: { type: 'csv', parse: 'auto' }, 
          transform: [
            {
              type: 'geo', 
              projection: 'mercator',
              scale: 140, 
              translate: [450,280],
              lon: 'longitude',
              lat: 'latitude'
            },
            {
              type: 'filter',
              test: 'datum.layout_x != null && datum.layout_y != null' 
            }
          ]
        }
      ],
      scales: [],
      signals: [
        {
          name: 'hover',
          init: null,
          streams: [
            { type: 'symbol:mouseover', expr: 'datum' },
            { type: 'symbol:mouseout', expr: 'null' }
          ]
        },
        {
          name: 'title',
          init: 'Our partners around the world',
          streams: [
            {
              type: 'hover',
              expr: 'hover ? hover.name + " ("+ hover.country +")" : "Our partners around the world"' 
            }
          ]
        }
      ],
      marks: [
        {
          type: 'path',
          from: { data: 'world' },
          properties: {
            enter: {
              path: { field: 'layout_path' },
              fill: { value: '#dedede' },
              stroke: { value: '#ffffff' }
            },
            update: { fill: { value: '#dedede' } },
            hover: { fill: { value: '#37A3DC' } }
          }
        },
        {
          type: 'symbol',
          from: { data: 'countriesLocation' },
          properties: {
            enter: {
              x: { field: 'layout_x' },
              y: { field: 'layout_y' },
              size: { value: 16 },
              fill: { value: 'steelblue' },
              fillOpacity: { value: 0.8 },
              stroke: { value: '#ffffff' },
              strokeWidth: { value: 0.5 }
            }
          }
        },
        {
          type: 'text',
          interactive: false,
          properties: {
            enter: {
              x: { value: 500 },
              y: { value: 500 },
              fill: { value: '#000000' },
              fontSize: { value: 20 },
              align: { value: 'right' }
            },
            update: {
              text: { signal: 'title' }
            }
          }
        }
      ]      
    }

我得到以下结果:

World map with symbols for each country

到目前为止的行为是,当我将鼠标悬停在一个国家上时,其填充颜色会改变,但不会显示该国家的名称,当我将一个符号(每个国家/地区上的蓝点)悬停时,填充将丢失但是会显示国家名称。

当我将鼠标悬停在每个国家/地区时,如何显示该国家/地区的名称而不会丢失该填充?

0 个答案:

没有答案