我正在使用plotly.js制作一个简单的世界地图,上面有一些线条。数据只是纬度和经度的csv,数量并不重要。
Plotly.d3.csv('edgel_latlon.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });}
function getMaxOfArray(numArray) {
return Math.max.apply(null, numArray);
}
var data = [];
var count = unpack(rows, 'To');
var startLongitude = unpack(rows, 'lon1');
var endLongitude = unpack(rows, 'lon2');
var startLat = unpack(rows, 'lat1');
var endLat = unpack(rows, 'lat2');
for ( var i = 0 ; i < count.length; i++ ) {
var opacityValue = count[i]/getMaxOfArray(count);
var result = {
type: 'scattergeo',
locationmode: 'world',
lon: [ startLongitude[i] , endLongitude[i] ],
lat: [ startLat[i] , endLat[i] ],
mode: 'lines',
line: {
width: .5,
color: 'red'
},
opacity: 1
};
data.push(result);
};
var layout = {
title: 'Title',
showlegend: false,
geo:{
resolution:1000,
scope: 'world',
projection: {
type: 'mercator'
},
showland: true,
showcountries: true,
landcolor: 'rgb(243,243,243)',
countrycolor: 'rgb(0,0,0)'
}
};
Plotly.plot(myDiv, data, layout, {showLink: false});
});
当我将鼠标悬停在地图上的一条线上时,我希望线条从红色变为蓝色,但不知道如何用图形方式做到这一点。要么你不能使用标准的D3方法访问该行,或者我遗漏了一些明显的东西。谢谢!