Это то, что у меня есть:
https://bl.ocks.org/S-Simon/6733f3f102e6cebef236f2375de08c59
Проблема в том, что я вызываю spin ();Функция полностью портит другие функции (перетаскивание, зависание, щелчки и т. д.), а также замедляет работу моего компьютера.В связи с этим я не назвал это здесь, поэтому у вас не будет никаких проблем и вы сможете увидеть, в чем заключается основная функциональность.
Я не знаю, что происходит.Соответствующая функция называется spin , так что вам будет легче ее найти.
У кого-нибудь есть идеи, как сделать вращение глобуса автоматическим с сохранением функциональности?
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.7/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://unilogue.github.io/js/map/datamaps.world.min.js"></script>
<style type="text/css" media="screen">
div#world:before {
content:"";
position: absolute;
top:91px;
width:500px;
height: 500px;
background: -webkit-radial-gradient(70% top,#f2f2f2,#ededed);
background: radial-gradient(at 70% top,#f2f2f2,#ededed);
box-shadow: 0px 20px 405px rgba(0,0,0,0.18);
-moz-box-shadow: 0px 20px 405px rgba(0,0,0,0.18);
-webkit-box-shadow: 0px 20px 40px rgba(0,0,0,0.18);
-o-box-shadow: 0px 20px 40px rgba(0,0,0,0.18);
border-radius: 50%;
z-index:-1;
}
.datamap path.datamaps-graticule{
stroke:none!important;
}
div.hoverinfo {
background-color: #FFF;
box-shadow: 0px 2px 14px 1px rgba(0,0,0,0.22);
font-size: 16px;
padding: 0.5rem 1rem;
border-radius: 6px;
color: #0A5B90;
}
.datamaps-hoverover {
margin-left: 350px;
}
path[data-info] {
cursor:pointer;
}
</style>
<div id="world" style="fill-opacity:0.7; height: 600px; width: 500px; margin-left: auto; margin-right: auto;"></div>
<script type="text/javascript">
//basic map config with custom fills, mercator projection
var series = [
["USA","https://bing.com"],["GBR",1],["CAN",1],["DEU",5.7],["FRA", 4.1],["ESP",4.1],["ITA",3.3],["MEX",3.0],["AUS",2.5],["NLD",2.4],
["IND",1],["BRA",1],["GRC",1],["AUT",1.2],["ROU",1.2],["SRB",1.0],["COL",0.8],["POL",0.8],["ZAF",0.7],["SWE",0.7],
["DNK",1],["VEN",1],["JPN",1],["KOR",0.6],["BEL",0.5],["RUS",0.5],["PRT",0.5]
];
var dataset = {};
var time = Date.now();
var autorotate = [39.666666666666664, -30];
var velocity = [.015, -0];
// We need to colorize every country based on "partnerLink"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
var onlyValues = series.map(function(obj){ return obj[1]; });
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = d3.scale.linear()
.domain([minValue,maxValue])
.range(["rgb(0,0,0)","rgb(219,219,219)"]); // color
// fill dataset in appropriate format
series.forEach(function(item){ //
// item example value ["USA", 36.2]
var iso = item[0],
value = item[1];
dataset[iso] = { partnerLink: value, fillColor: 'rgba(10,91,144,1)' };
});
var map;
var globalRotation = [-19.16,-26];
function redraw() {
d3.select("#world").html('');
init();
const buttons = document.querySelectorAll("[data-info]");
buttons.forEach((button) => {
button.addEventListener('click', () => {
var partnerLink = JSON.parse(button.getAttribute("data-info")).partnerLink;
console.log(partnerLink);
window.open(
partnerLink,
'_blank' // <- This is what makes it open in a new window.
);
});
});
}// redraw
function init() {
map = new Datamap({//need global var
scope: 'world',
element: document.getElementById('world'),
projection: 'orthographic',
projectionConfig: {
rotation: globalRotation
},
fills: {defaultFill: '#C8E2F3'},
data: dataset,
geographyConfig: {
responsive: true,
borderColor: 'rgba(84, 141, 178, 0.2)',
highlightBorderWidth: 1,
highlightFillOpacity: 1,
// don't change color on mouse hover
highlightFillColor: function(geo) {
if (typeof geo.partnerLink !== "undefined") {
return '#0A5B90';
}
return geo['fillColor'] || '#C8E2F3';
},
// only change border
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) { return ; }
// tooltip content
return ['',
'<div style="opacity:1;" class="hoverinfo">Our partner in ' + geo.properties.name,
'. ',
''].join('');
},
done: function(datamap) {
datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
function redraw() {
datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
}
}
});
//draw a legend for this map
map.legend();
map.graticule();
var timer;
function spin() {
timer = d3.timer(function() {
var dt = Date.now() -time;
map.projection.rotate([autorotate[0] + velocity[0] * dt, autorotate[1] + velocity[1] * dt]);
redraw();
});
};
var drag = d3.behavior.drag().on('drag', function() {
var dx = d3.event.dx;
var dy = d3.event.dy;
// var rotation = livemapScope.rotation;
var rotation = map.projection.rotate();
var radius = map.projection.scale();
var scale = d3.scale.linear()
.domain([-1 * radius, radius])
.range([-90, 90]);
var degX = scale(dx);
var degY = scale(dy);
rotation[0] += degX;
rotation[1] -= degY;
if (rotation[1] > 90) rotation[1] = 90;
if (rotation[1] < -90) rotation[1] = -90;
if (rotation[0] >= 180) rotation[0] -= 360;
globalRotation = rotation;
redraw();
});
d3.select("#world").select("svg").call(drag);
// I would call spin(); here but it doesn't work properly
}// init
redraw();
</script>