地理路径生成器
var projection = d3.geo.mercator()
.center([0,0])
.scale(100)
.translate([width/2,height/2])
.rotate()
var path = d3.geo.path()
.projection(projection);
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.js"></script>
<style>
.country{
stroke: black;
stroke-width: 0.5px;
}
</style>
</head>
<body>
<script>
width = 800
height =500
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
var projection = d3.geoEquirectangular()
.center([0,0])//中心点位置即地图[经度0,维度0]对应的svg画板的坐标默认(0,0)
.scale(100)//地图缩放
.translate([width/2,height/2])//平移,一般将[0,0]点平移到中心
.rotate([198,0,0])//旋转地图,来指定中心位置
var path = d3.geoPath()
.projection(projection);
var color = d3.scaleOrdinal(d3.schemeTableau10)
d3.json("./map/world/world.json").then(function(root){
var groups = svg.append('g')
groups.selectAll("path")
.data(root.features)
.enter()
.append("path")
.attr("class","country")
.style("fill",(d,i)=>color(i))
.attr("d",path)
})
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.js"></script>
<style>
.country{
stroke: black;
stroke-width: 0.5px;
}
</style>
</head>
<body>
<script>
width = 800
height =500
var svg = d3.select("body").append("svg").attr("width",width).attr("height",height)
var projection = d3.geoEquirectangular()
.center([0,0])
.scale(100)
.translate([width/2,height/2])
.rotate([198,0,0])
var path = d3.geoPath()
.projection(projection);
var color = d3.scaleOrdinal(d3.schemeTableau10)
d3.json("./map/world/world.json").then(function(data){
var groups = svg.append('g')
groups.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("class","country")
.style("fill",(d,i)=>color(i))
.attr("d",path)
.each(function(d,i){
var centroid = path.centroid(d)
svg.append("text")
.attr("class","centroid")
.attr("x",centroid[0])
.attr("y",centroid[1])
.text(d['properties']['chinese'])
.attr('font-size',2)
})
})
</script>
</body>
</html>
方法 | 描述 |
---|---|
d3.geoPath | 创建地理path生成器 |
path.projection | 指定映射方法 |
Paths
d3.geoPath - create a new geographic path generator.
path - project and render the specified feature.
path.area - compute the projected planar area of a given feature.
path.bounds - compute the projected planar bounding box of a given feature.
path.centroid - compute the projected planar centroid of a given feature.
path.measure - compute the projected planar length of a given feature.
path.projection - set the geographic projection.
path.context - set the render context.
path.pointRadius - set the radius to display point features.
Projections
projection - project the specified point from the sphere to the plane.
projection.invert - unproject the specified point from the plane to the sphere.
projection.stream - wrap the specified stream to project geometry.
projection.clipAngle - set the radius of the clip circle.
projection.clipExtent - set the viewport clip extent, in pixels.
projection.angle - set the post-projection rotation.
projection.reflectX - reflect the x-dimension.
projection.reflectY - reflect the y-dimension.
projection.scale - set the scale factor.
projection.translate - set the translation offset.
projection.fitExtent - set the scale and translate to fit a GeoJSON object.
projection.fitSize - set the scale and translate to fit a GeoJSON object.
projection.fitWidth - set the scale and translate to fit a GeoJSON object.
projection.fitHeight - set the scale and translate to fit a GeoJSON object.
projection.center - set the center point.
projection.rotate - set the three-axis spherical rotation angles.
projection.precision - set the precision threshold for adaptive sampling.
projection.preclip - set the spherical clipping stream transform.
projection.postclip - set the planar clipping stream transform.
d3.geoClipAntimeridian - cuts spherical geometries that cross the antimeridian.
d3.geoClipCircle - clips spherical geometries to a small circle.
d3.geoClipRectangle - clips planar geometries to a rectangular viewport.
d3.geoAlbers - the Albers equal-area conic projection.
d3.geoAlbersUsa - a composite Albers projection for the United States.
d3.geoAzimuthalEqualArea - the azimuthal equal-area projection.
d3.geoAzimuthalEquidistant - the azimuthal equidistant projection.
d3.geoConicConformal - the conic conformal projection.
d3.geoConicEqualArea - the conic equal-area (Albers) projection.
d3.geoConicEquidistant - the conic equidistant projection.
conic.parallels - set the two standard parallels.
d3.geoEqualEarth - the Equal Earth projection.
d3.geoEquirectangular - the equirectangular (plate carreé) projection.
d3.geoGnomonic - the gnomonic projection.
d3.geoMercator - the spherical Mercator projection.
d3.geoOrthographic - the azimuthal orthographic projection.
d3.geoStereographic - the azimuthal stereographic projection.
d3.geoTransverseMercator - the transverse spherical Mercator projection.
project - project the specified point from the sphere to the plane.
project.invert - unproject the specified point from the plane to the sphere.
d3.geoProjection - create a custom projection.
d3.geoProjectionMutator - create a custom configurable projection.
d3.geoAzimuthalEqualAreaRaw - the raw azimuthal equal-area projection.
d3.geoAzimuthalEquidistantRaw - the raw azimuthal equidistant projection.
d3.geoConicConformalRaw - the raw conic conformal projection.
d3.geoConicEqualAreaRaw - the raw conic equal-area (Albers) projection.
d3.geoConicEquidistantRaw - the raw conic equidistant projection.
d3.geoEquirectangularRaw - the raw equirectangular (plate carreé) projection.
d3.geoGnomonicRaw - the raw gnomonic projection.
d3.geoMercatorRaw - the raw Mercator projection.
d3.geoOrthographicRaw - the raw azimuthal orthographic projection.
d3.geoStereographicRaw - the raw azimuthal stereographic projection.
d3.geoTransverseMercatorRaw - the raw transverse spherical Mercator projection.
https://github.com/d3/d3/blob/master/API.md#geographies-d3-geo