У меня есть несколько стран, в которых я хотел бы использовать другой цвет заливки.Есть какой-либо способ сделать это?Я знаю, что world-110m.json различает страны, поэтому я предполагаю, что должно быть теоретически возможным.Может быть, мне нужно отредактировать файл JSON и «пометить» указанные страны, чтобы я мог их стилизовать?
Я также хотел бы показать названия этих стран (не против набрать его вручную), но я думаю,это совсем другая проблема.
Это мой текущий код:
<html>
<head>
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
<script type='text/javascript' src='./planetaryjs.js'></script>
</head>
<body>
<canvas id='rotatingGlobe' width='400' height='400'
style='width: 400px; height: 400px; cursor: move;'></canvas>
<script type="text/javascript">
(function() {
var globe = planetaryjs.planet();
// Load our custom `autorotate` plugin; see below.
globe.loadPlugin(autorotate(10));
// The `earth` plugin draws the oceans and the land; it's actually
// a combination of several separate built-in plugins.
//
globe.loadPlugin(planetaryjs.plugins.earth({
topojson: { file: 'https://gist.githubusercontent.com/dwtkns/4686432/raw/3e6d4c77e4fc69dba29c022d9b07d19162017f54/world-110m.json' },
oceans: { fill: '#000080' },
land: { fill: '#339966' },
borders: { stroke: '#008000' }
}));
// The `pings` plugin draws animated pings on the globe.
globe.loadPlugin(planetaryjs.plugins.pings());
// The `zoom` and `drag` plugins enable
// manipulating the globe with the mouse.
globe.loadPlugin(planetaryjs.plugins.zoom({
scaleExtent: [100, 300]
}));
globe.loadPlugin(planetaryjs.plugins.drag({
// Dragging the globe should pause the
// automatic rotation until we release the mouse.
onDragStart: function() {
this.plugins.autorotate.pause();
},
onDragEnd: function() {
this.plugins.autorotate.resume();
}
}));
// Set up the globe's initial scale, offset, and rotation.
globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
// Every few hundred milliseconds, we'll draw another random ping.
var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
setInterval(function() {
var lat = Math.random() * 170 - 85;
var lng = Math.random() * 360 - 180;
var color = colors[Math.floor(Math.random() * colors.length)];
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
}, 150);
var canvas = document.getElementById('rotatingGlobe');
// Special code to handle high-density displays (e.g. retina, some phones)
// In the future, Planetary.js will handle this by itself (or via a plugin).
if (window.devicePixelRatio == 2) {
canvas.width = 800;
canvas.height = 800;
context = canvas.getContext('2d');
context.scale(2, 2);
}
// Draw that globe!
globe.draw(canvas);
// This plugin will automatically rotate the globe around its vertical
// axis a configured number of degrees every second.
function autorotate(degPerSec) {
// Planetary.js plugins are functions that take a `planet` instance
// as an argument...
return function(planet) {
var lastTick = null;
var paused = false;
planet.plugins.autorotate = {
pause: function() { paused = true; },
resume: function() { paused = false; }
};
// ...and configure hooks into certain pieces of its lifecycle.
planet.onDraw(function() {
if (paused || !lastTick) {
lastTick = new Date();
} else {
var now = new Date();
var delta = now - lastTick;
// This plugin uses the built-in projection (provided by D3)
// to rotate the globe each time we draw it.
var rotation = planet.projection.rotate();
rotation[0] += degPerSec * delta / 1000;
if (rotation[0] >= 180) rotation[0] -= 360;
planet.projection.rotate(rotation);
lastTick = now;
}
});
};
};
})();
</script>
</body>
</html>