d3.js读取JSON文件数据并输出

JavaScript019

d3.js读取JSON文件数据并输出,第1张

//获取json,这里用的是jquery的ajax方法,只是意思意思,这里可以替换为任何ajax请求

function getData(){

$.ajax({

url: "xxx.php",

success: function(jsondata){

output(jsondata)

}

})

}

//函数

function output(json){

//转换字符串为对象

var Data = eval('(' + json + ')')

var html = ''

for(var i=0i<Data.lengthi++){

//具体键值根据你返回的字符串来

html += '名字' + Data[i].name + ' 年龄' + Data[i].age

}

//插入到元素

document.getElementById('el').innerHTML = html

}

//每隔10秒执行

setTimeout(getData, 10000)

D3 的方法不同于所谓的栅格方法,例如 Leaflet 和 Google Maps。这些 预渲染地图特征为图像瓦片 ,它们从网络服务器加载并在浏览器中拼凑在一起形成地图。

通常,D3以 GeoJSON 的形式请求 矢量地理信息,并在浏览器中将其呈现为 SVG 或 Canvas

光栅地图通常看起来更像传统的印刷地图,其中可以显示很多细节(例如地名、道路、河流等),而不会影响性能。但是,使用矢量方法更容易实现动画和交互等动态内容。(将这两种方法结合起来也很常见。)

GeoJSON 是一种使用 JSON 格式表示地理数据的标准,完整的规范位于 geojson.org 。每个要素都由 几何 (国家的简单多边形和廷巴克图的一个点)和 属性 组成。D3 在渲染 GeoJSON 时会处理大部分细节,因此只需对 GeoJSON 有基本的了解即可开始使用 D3 映射。

投影函数采用经度和纬度坐标(以数组的形式 [lon, lat] )并将其转换为 x 和 y 坐标。投影数学可以变得相当复杂,但幸运的是 D3 提供了大量的投影函数。

地理路径生成器是一个接受 GeoJSON 对象并将其转换为 SVG 路径字符串的函数。可以使用该方法创建生成器 .geoPath 并使用投影功能对其进行配置。

GeoJSON 是一种基于 JSON 的结构,用于指定地理数据。通常,它是使用mapshaper、ogr2ogr、shp2json或QGIS等工具从 shapefile 数据(一种广泛用于 GIS 领域的地理空间矢量数据格式)转换而来的。

shapefile 的一个来源是Natural Earth,如果开始,我建议尝试使用mapshaper来导入 shapefile 并导出为 GeoJSON。它还可以按属性过滤(例如,如果您想按大陆过滤国家)。

可以在不详细了解 GeoJSON 规范的情况下创建地图,因为诸如 mapshaper 和 D3 之类的工具可以很好地抽象出细节。

到目前为止,我们已经在示例文件中嵌入了 GeoJSON 对象。实际上,GeoJSON 将位于一个单独的文件中,并使用 ajax 请求加载。但在本章的其余部分,我们将使用以下方式加载 GeoJSON 文件:

d3.geoInterpolate()函数接受 0 到 1 之间的输入并在两个 [lon, lat] 位置之间进行插值:

可以使用 d3.geoContains 接受 GeoJSON 功能和 [lon, lat] 数组并返回布尔值来检查鼠标或触摸事件是否发生在要素边界内(SVG渲染情况下有效)