在 Windows 8.1 上的流星中使用 d3，如何显示世界地图，放大美国，带有国家边界和美国州边界？答案

【问题标题】：Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?在 Windows 8.1 上的流星中使用 d3，如何显示世界地图，放大美国，带有国家边界和美国州边界？
【发布时间】：2015-05-24 16:10:25
【问题描述】：

我正在用流星（在 Windows 8.1 中）写一些东西，并想显示一张地图，其中概述了美国各州，但邻国仍在显示。

理想情况下，地图应该是正交投影。

我还想在地图上显示点，带有文字说明。

我尝试将this tutorial 放入meteor，在我的/public 目录中使用this topo.json file。

我的 html 文件是 hello.html:

<head>
    <meta charset="utf-8">
    <title>D3 World Map</title>
</head>

<body>
  {{> map}}
</body>

<template name = "map">
    <div id="worldMap">
    </div>
</template>

我的 css 文件是 hello.css：

path {
    stroke: white;
    stroke-width: 0.5px;
    fill: black;
}

我的 js 文件是 hello.js：

    if (Meteor.isServer) {
      Meteor.startup(function () {
        // code to run on server at startup
      });
    }


if (Meteor.isClient) {
      Template.map.rendered = function() {

          var width = 900;
          var height = 600;

          var projection = d3.geo.mercator();

          var svg = d3.select("#worldMap").append("svg")
              .attr("width", width)
              .attr("height", height);
          var path = d3.geo.path()
              .projection(projection);
          var g = svg.append("g");


          // also tried d3.json("/world-110m2.json", function(error, topology)
          // "/public/world-110m2.json", and "public/world-110m2.json"
          d3.json("world-110m2.json", function(error, topology) { 
              g.selectAll("path")
                  .data(topojson.object(topology, topology.objects.countries)
                      .geometries)
                  .enter()
                  .append("path")
                  .attr("d", path)
          });
      }
    }

我的 .meteor/versions 文件是：

autopublish@1.0.3
autoupdate@1.2.1
base64@1.0.3
binary-heap@1.0.3
blaze@2.1.2
blaze-tools@1.0.3
boilerplate-generator@1.0.3
callback-hook@1.0.3
check@1.0.5
d3@1.0.0
ddp@1.1.0
deps@1.0.7
ejson@1.0.6
fastclick@1.0.3
garrilla:topojson@1.6.18
geojson-utils@1.0.3
html-tools@1.0.4
htmljs@1.0.4
http@1.1.0
id-map@1.0.3
insecure@1.0.3
jquery@1.11.3_2
json@1.0.3
launch-screen@1.0.2
livedata@1.0.13
logging@1.0.7
meteor@1.1.6
meteor-platform@1.2.2
minifiers@1.1.5
minimongo@1.0.8
mobile-status-bar@1.0.3
mongo@1.1.0
observe-sequence@1.0.6
ordered-dict@1.0.3
random@1.0.3
reactive-dict@1.1.0
reactive-var@1.0.5
reload@1.1.3
retry@1.0.3
routepolicy@1.0.5
session@1.1.0
spacebars@1.0.6
spacebars-compiler@1.0.6
templating@1.1.1
tracker@1.0.7
ui@1.0.6
underscore@1.0.3
url@1.0.4
webapp@1.2.0
webapp-hashing@1.0.3

当我运行它时，它给了我'Uncaught SyntaxError: Unexpected Token

我怎样才能显示地图？

【问题讨论】：

标签： javascript json d3.js meteor

【解决方案1】：

json 文件通过 url 获取到/data/geo/countries.topo.json。 Meteor 将/ 路径匹配到/public 目录。

这意味着 json 文件在 /public/data/geo 目录中可用，或者更具体地说是：https://github.com/ArroyoLabs/meetups/tree/master/d3demo/public/data/geo

【讨论】：

【解决方案2】：

tl;博士： Windows 上流星中的 d3 目前不工作，所以在 ubuntu 或 mac 中运行

d3 包坏了，改用'meteor add d3js:d3'

meteor d3 比较老，所以使用'topojson.features'，而不是'topojson.objects'

让我与您分享我是如何解决这个问题的。我在windows上运行meteor，这是一个问题，因为它似乎没有适用于windows的d3（或者topojson）包（d3.json似乎无法解析json文件，给出'json 文件的第 1 行第 1 行的意外符号'的错误）。

d3 包似乎也不是很好，但 d3js:d3 包可以工作。最后，meteor d3js:d3 包似乎是 d3 的旧版本，您必须使用“topojson.features”而不是“topojson.objects”。

因此，在使用这些修复程序在 ubuntu 中部署之后，它起作用了。

【讨论】：