Question

我正在使用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方法访问该行，或者我遗漏了一些明显的东西。谢谢！

Plotly.js悬停改变元素的颜色

0 个答案: