Question

我正在流星（在Windows 8.1中）写一些东西，想要显示美国各州概述的地图，但邻国仍在展示。

the basic map I want to show

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

我还想在地图上显示带有文字标题的点。

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

我的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＆lt;'跟踪渲染的html文件的第1行。

如何让地图显示？

Answer 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

Answer 2

tl;博士： Windows上的meteor中的d3暂时不起作用，因此请在ubuntu或mac

中运行

d3包很糟糕，做'meteor add d3js：d3'而不是

流星d3较旧，所以请使用'topojson.features'，而不是'topojson.objects'

让我与您分享我是如何解决这个问题的。我在Windows上运行流星，这是一个问题，因为它似乎没有一个d3（或可能topojson）包在Windows上工作（d3.json似乎无法解析json文件，给出“json文件第1行第1行的意外符号”错误。

看起来d3包也不是很好，但是d3js：d3包可以工作。最后，似乎meteor d3js：d3包是d3的旧版本，你必须使用'topojson.features'而不是'topojson.objects'。

因此，在使用这些修复程序在ubuntu中部署后，它可以正常工作。

在Windows 8.1的meteor中使用d3，如何显示世界地图，放大美国，国家边界和美国国家边界？

2 个答案: