基于airports demo和map 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' }
}
}
}
]
}
我得到以下结果:
到目前为止的行为是,当我将鼠标悬停在一个国家上时,其填充颜色会改变,但不会显示该国家的名称,当我将一个符号(每个国家/地区上的蓝点)悬停时,填充将丢失但是会显示国家名称。
当我将鼠标悬停在每个国家/地区时,如何显示该国家/地区的名称而不会丢失该填充?