javascript - 使用D3.js绘制自定义json映射-6ren

javascript - 使用D3.js绘制自定义json映射

转载作者：行者123 更新时间：2023-11-30 11:27:29

29

4

我正在使用D3.js创建地图。
我首先从此处下载国家（加拿大）shapefile：
https://www.arcgis.com/home/item.html?id=dcbcdf86939548af81efbd2d732336db

..并在此处将其转换为geojson（链接到下面的文件）：
http://mapshaper.org/

到目前为止，我所看到的只是一个彩色块，控制台上没有任何错误。我的问题是，我怎么知道我的json文件或代码不正确？
这是我的代码，底部是指向json文件的链接。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>D3: Setting path fills</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <!-- <script src="https://d3js.org/topojson.v1.min.js"></script> -->
        <style type="text/css">
        /* styles */       
        </style>
    </head>
    <body>
        <script type="text/javascript">
        var canvas = d3.select("body").append("svg")
        .attr("width", 760)
        .attr("height", 700)
        d3.json("canada.geo.json", function(data) {
        var group = canvas.selectAll("g")
        .data(data.features)
        .enter()
        .append("g")

        var projection = d3.geo.mercator();
        var path = d3.geo.path().projection(projection);
        var areas = group.append("path")
        .attr("d",path)
        .attr("class","area")
        })
        </script>
    </body>
</html>

链接到json文件：
https://github.com/returnOfTheYeti/CanadaJSON/blob/master/canada.geo.json

最佳答案

d3 geoProjection使用未投影的坐标-三维地球上的坐标。 geoProjection获取这些坐标并将其投影到二维平面上。未投影坐标的单位通常是经度和纬度，并且d3 geoProjection会期望这样做。问题在于您的数据已经被投影。

如何判断数据是否已投影？

有两种快速的方法来确定是否投影您的数据：

看一下数据的元数据
看一下自己的地理坐标

查看地理元数据

数据使用的投影是在.prj文件中定义的，该文件是构成shapefile的文件集合的一部分：

PROJCS["Canada_Albers_Equal_Area_Conic",
   GEOGCS["GCS_North_American_1983",
      DATUM["D_North_American_1983",
        SPHEROID["GRS_1980",6378137.0,298.257222101]],
      PRIMEM["Greenwich",0.0],
      UNIT["Degree",0.0174532925199433]],
  PROJECTION["Albers"],
  PARAMETER["False_Easting",0.0],
  PARAMETER["False_Northing",0.0],
  PARAMETER["Central_Meridian",-96.0],
  PARAMETER["Standard_Parallel_1",50.0],
  PARAMETER["Standard_Parallel_2",70.0],
  PARAMETER["Latitude_Of_Origin",40.0],
  UNIT["Meter",1.0]]

您的数据已经使用Albers投影进行了投影，测量单位是米。投影该数据就好象它由经/纬对组成，将无法正常工作。

如果只有geojson文件而没有参考shapefile，则某些geojson文件会在投影属性中指定EPSG编号，如果该编号不是4326，则可能是已投影的数据。

看坐标

您可以说您的数据没有非投影数据，因为每个坐标的值都在经度和纬度（东/西+/- 180度，南北+/- 90度）的范围之外：

"coordinates":[[[[899144.944639163,2633537.

您的坐标在全球范围内平移了几次：这就是为什么投影导致svg完全充满要素的原因。

好吧，现在呢？

有两种主要的解决方案供您选择：

转换投影，使geojson由纬度和经度点组成
使用d3.geoTransform或d3.geoIdentity转换您的投影数据。

转换投影

为此，您要“取消投影”数据，或者投影数据，使其包含经度，纬度点。

大多数GIS软件都可以重新投影数据。使用shapefile比使用geojson要容易得多，因为shapefile在GIS软件中更为常见。 GDAL，QGIS，ArcMap提供了相对容易的转换。

也有在线转换器，mapshaper.org可能是最简单的转换器，并且在处理d3时具有更多好处-简化（许多shapefile包含太多用于Web映射目的的细节）。将shapefile的所有文件拖到mapshaper窗口中，打开控制台并键入： proj wgs84。导出为geojson（简化后），您就可以为d3准备好geojson了。

重新投影后，您可能会发现您的数据看起来很尴尬。不用担心，它是未投影的（好吧，是某种未投影的，它显示为2d，但是具有非常简单的投影，假定笛卡尔输入数据）。

使用未投影的数据，现在可以在d3中投影数据了。

这是您的数据的 example（d3-v4。数据已简化并在mapshaper上重新投影（对我没有隶属关系））

使用d3.geoIdentity或d3.geoTransform

为此，我建议使用d3v4（我看到您的代码是v3）。尽管geo.transform在v3中可用，但是如果没有v4中可用的新方法（即d3.geoIdentity和projection.fitSize），则麻烦得多。我将在这里介绍使用投影数据的v4方法

使用数据，您可以定义另一种类型的投影：

var projection = d3.geoIdentity();

但是，如果您不小心，这种类型的“投影”会给您带来麻烦。它基本上吐出给出的x，y值。但是，地理投影坐标空间通常在左下角的某个位置具有[0,0]，而svg坐标空间在左上角的[0,0]。在svg坐标空间中，y值随着您沿着坐标平面下降而增加，在数据的投影坐标空间中，y值随着您上升而增大。因此，使用身份将使您的数据倒置。

幸运的是，我们可以使用：

var projection = d3.geoIdentity()
   .reflectY(true);

最后一个问题仍然存在：geojson中的坐标未缩放或转换，因此要素未正确居中。为此，有fitSize方法：

   var projection = d3.geoIdentity()
       .reflectY(true)
       .fitSize([width,height],geojsonObject)

这里的width和height是SVG（或我们要在其中显示特征的父容器）的宽度和高度，而geojsonObject是geojson特征。请注意，它不会采用一系列功能，如果您具有一系列功能，请将它们放置在功能集中。

Here's使用这种方法显示的数据（我仍然简化了geojson）。

您也可以使用geoTransform，这有点复杂，但是允许您指定自己的变换方程式。在大多数情况下，坚持使用geoIdentity可能是过大的。

每个选项的优点和缺点：

取消投影数据：

除了要取消投影数据的最初行程之外，还需要取消投影数据，使其包含经度纬度对，因此每次显示数据时都必须进行一些额外的处理。

但是，通过访问任何d3 geoProjection，您在显示数据方面也具有高度的灵活性。使用未投影的数据还可以使您更轻松地对齐不同的图层：您不必担心分别缩放和转换多个图层。

保留投影数据

通过保持数据的投影，您无需进行球形数学运算，从而节省了计算时间。缺点是上面列出的优点，很难匹配不共享此投影的数据（如果使用此投影导出所有内容，这很好），并且您难以使用表示法-d3.geoTransform在将您的投影从墨卡托转换为阿尔伯斯的方法。

请注意，我在上面的选项2中使用的fit.size（）方法可用于所有geoProjections（v4）。

在两个示例中，我尽可能使用您的代码。虽然有几点警告，但我改为d3v4（例如，d3.geo.path-> d3.geoPath，d3.geo.mercator-> d3.geoMercator）。我还将变量 canvas的名称更改为 svg，因为它是svg而不是画布的选择。最后，在第一个示例中，我没有修改您的投影，墨卡托的中心默认为[0,0]（长/拉），这解释了奇怪的位置

关于javascript - 使用D3.js绘制自定义json映射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47447754/

29

4

0

javascript - 使用 WebScriptEndpoint 使用 javascript 使用 WCF 服务
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。任何人都可以对此给出任何指导吗？谢谢最佳答案这是一篇关于
c - 没有结果!!使用 fork() 使用 dup2 使用 2 个管道运行 execlp()
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
python - 处理文件上传，使用 Pillow 调整大小，使用 SQLAlchemy 存储，使用 Flask 提供文件
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
excel - 使用 IF 使用 VBA 在单元格中添加公式的问题
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
使用 OperatorPrecedenceParser 使用 FParsec 解析函数应用程序？
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
sql - 使用 sequelize 使用 where 查询编码计数
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
bash - 使用 “let”分配Bash失败，使用 “/”
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
javascript - 使用 JavaScript 使用 FOR OF 数组循环时出现错误？
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。而且我的 jquery 类和 insertadjacentHTMl 也不
javascript - 使用 javascript 使用 for 属性更改表单标签内容
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。这是输入和标签的结构:
javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除按钮。问题是 Delete 按钮在新插入的元素上不起作用，
使用 awk 使用 sha1sum 进行散列
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
mysql - 使用 insert into 使用 mysql
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
jquery - 将输入字段值修剪为仅字母数字字符/使用 .使用 jQuery
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地输
javascript - 使用 .innerHTML 使用 DOM
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。这是一个获取输入值、检查选择
php - 使用 angularjs 使用 where 子句从数据库获取数据
我想使用 angularjs 从 mysql 数据库加载数据。这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上我想获取这个值并通过 angularjs
ios - 使用 UITableViewCell 使用 AutoLayout
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。这就是我想要实现的目标所以在这里你可以看到我正在谈论的
mysql - 使用 ElasticSearch 使用 or 和运算符搜索多个字段
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
ios - 使用 Swift 使用 JSON
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
javascript - 使用 JavaScript 使用 for 循环声明变量
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？现在，在比较 col.1 和
jquery - 使用 :after 使用 jquery 更改样式
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {

首页

博学

6Ren·AI

商城

javascript - 使用D3.js绘制自定义json映射