D3 Geographies

地理路径生成器

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 = 800height =500var 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 = 800height =500var 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

D3 Geographies相关推荐

从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探与我的计划书
缘起哈喽大家周四好!又是开心的一天,时间过的真快,我们的 <从壹开始 .net core 2.1 + vue 2.5 >前后端分离系列共 34 篇已经完结了,当然以后肯定还会有更新和修改 ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...
【D3】transition API
摘要: 动画类API 一.API 使用 1. 1 d3.ease 1.2 d3.timer Start a custom animation timer, invoking the specified ...
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
交互式数据可视化－D3.js（一）
在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics),是用于描述二维矢量图形的一种图形格式,是由W3C制订的开放标准.SVG使用XM ...
r语言编辑 d3.js_d3.js的语言介绍
r语言编辑 d3.js by Matt Oxley 由马特·奥克斯利(Matt Oxley) d3.js的语言介绍 (A linguistic introduction to d3.js) 如何从一 ...
d3.js图表_如何使用D3.js建立历史价格图表
d3.js图表逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a chall ...
用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
d3设置line长度_使用d3画一些基本的图形
生成图标需要有四个步骤 1生成图片容器 2设置比例尺 3生成数据图表 4生成坐标系在展示图表时一般要有个容器,我们可以使用.container 类,同时制定宽高.如下: 可以加个样式 #contai ...

D3 Geographies

D3 Geographies相关推荐

最新文章

热门文章