67 строки
1.4 KiB
HTML
67 строки
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
|
|
.frame {
|
|
stroke: #000;
|
|
fill: none;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.feature {
|
|
fill: #eee;
|
|
stroke: #ccc;
|
|
}
|
|
|
|
</style>
|
|
<script src="../../d3.v2.js"></script>
|
|
<body>
|
|
<script>
|
|
|
|
var margin = {top: 0, right: 0, bottom: 0, left: 0},
|
|
width = 960 - margin.left - margin.right,
|
|
height = 500 - margin.top - margin.bottom;
|
|
|
|
var projection = d3.geo.mercator()
|
|
.scale(width)
|
|
.translate([width / 2, height / 2]);
|
|
|
|
var path = d3.geo.path()
|
|
.projection(projection);
|
|
|
|
var zoom = d3.behavior.zoom()
|
|
.translate(projection.translate())
|
|
.scale(projection.scale())
|
|
.scaleExtent([height, 8 * height])
|
|
.on("zoom", move);
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
|
.call(zoom);
|
|
|
|
var g = svg.append("g"),
|
|
feature = g.selectAll(".feature");
|
|
|
|
svg.append("rect")
|
|
.attr("class", "frame")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
d3.json("../data/world-countries.json", function(collection) {
|
|
feature = feature
|
|
.data(collection.features)
|
|
.enter().append("path")
|
|
.attr("class", "feature")
|
|
.attr("d", path);
|
|
});
|
|
|
|
function move() {
|
|
projection.translate(d3.event.translate).scale(d3.event.scale);
|
|
feature.attr("d", path);
|
|
}
|
|
|
|
</script>
|