- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在生成澳大利亚的 TopoJSON map 。我已经成功生成了澳大利亚的 GeoJSON map 。然后我将该数据转换为 TopoJSON 但无法呈现 map 。
注意事项:
我在这里创建了一个 JSFiddle:https://jsfiddle.net/6j8sz21L/
谢谢!
这是供引用的 D3JS 代码(更多详细信息,请参阅 JSFiddle):
<!DOCTYPE html>
<html>
<head>
<title>Australia</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<style type="text/css">
.pin {
border: 1px solid white;
}
svg {
background: lightblue;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 960,
height = 700;
var projection = d3.geo.mercator()
.center([131,25])
.scale(900)
.translate([400,-500]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];
//Probably best practice to reverse these calls
d3.csv("/Australia/Data/ABS_Pop_15.csv", function(data) {
//Set up fill colours
var minimum = d3.min(data, function(d) { return d.Value; }),
maximum = d3.max(data, function(d) { return d.Value; });
var minimumColor = "#e5f5f9",
maximumColor = "#99d8c9";
var color = d3.scale
.linear()
.domain([minimum, maximum])
.range([minimumColor, maximumColor]);
//Clean data
var ValueById = {};
data.forEach(function(d) {
ValueById[d.id] = +d.Value;
});
d3.json("/Australia/Data/australia_adm4_topo_id.json", function(sa2) {
svg.append("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
.enter().append("path")
.attr("d", path);
console.log(sa2);
svg.selectAll(".label")
.data(places)
.enter().append("text", ".label")
.attr("transform", function(d) {
return "translate(" + projection([d.location.longitude, d.location.latitude]) + ")";
})
.style("font-family", "Arial, sans-serif")
.style("font-size", "12px")
.style("font-weight", "bold")
.style("stroke-width", "0px")
.style("stroke", "#fff")
.attr("dy", function(d) { return d.position.dy; })
.attr("dx", function(d) { return d.position.dx; })
.text(function(d) { return d.name; });
});
});
</script>
最佳答案
给您带来问题的代码行是:
svg.append("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
.enter().append("path")
.attr("d", path);
改为使用它(您可以直接将其复制到您的 fiddle 中的上面一行):
svg.selectAll("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4).features)
.enter().append("path")
.attr("d", path);
我根据一个类似的模板做了一些重写,我必须展示它的工作原理:
//map frame dimensions
var width = 960;
var height = 640;
//create a new svg element with the above dimensions
map = d3.select('#map')
.append('svg')
.attr('width', width)
.attr('height', height);
//create projection
var projection = d3.geo.mercator()
.center([0, -27])
.rotate([-140, 0])
.scale(Math.min(height * 1.2, width * 0.8))
.translate([width / 2, height / 2])
.precision(0.1);
//create svg path generator using the projection
var path = d3.geo.path()
.projection(projection);
// locations to render
var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];
// render map
var url = 'https://rawgit.com/DanielGalletta/Carto/master/Data/australia_adm4_topo_id.json';
d3.json(url, renderMap);
function renderMap(error, geoData) {
//add geometry to map
var mapAreas = map.selectAll('path')
.data(topojson.feature(geoData, geoData.objects.australia_adm4).features)
.enter() //create elements
.append('path') //append elements to svg
.attr('d', path) //project data as geometry in svg
// add locations to map
var cities = map.selectAll('.label')
.data(places)
.enter()
.append('text', '.label')
.attr('transform', function(d) {
return 'translate(' + projection([d.location.longitude, d.location.latitude]) + ')';
})
.attr('dy', function(d) { return d.position.dy; })
.attr('dx', function(d) { return d.position.dx; })
.text(function(d) { return d.name; })
};
path {
stroke-width: 1px;
stroke: white;
fill: lightblue;
cursor: pointer;
}
path:hover,
path.highlighted {
fill: steelblue;
}
.label {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
stroke-width: 0px;
stroke: #fff
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<div id="map"></div>
此外,这是一个 useful blog article关于 selectAll
和 append
函数如何对元素进行操作。
关于javascript - D3JS TopoJSON 澳大利亚 map : projection accurate but no country rendered,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41325519/
我有美国州 topojson 和加拿大州 topojson 我想将它们合并到单个文件中。有人可以告诉我如何将两个文件合并为单个 topojson 文件。我在创建 map 时使用墨卡托投影 最佳答案 我
related question 我正在尝试向 topojson 文件添加外部属性,us-counties.json (使用 us-atlas 使用 make topo/us-counties.jso
我想将三个 geojson 文件合并为一个 topojson 文件。其中两个文件是非常简单的形状文件。他们不需要简化。 其中之一是10m文化自然地球矢量文件。它的 geojson 是 24.8mb。我
因此,使用 -s 标志从命令行简化使用 topojson 没有问题,但是,我不知道如何从 节点模块。 我看到一个 topojson.simplify() 方法,但由于没有文档,我不知道它是如何工作的。
刚开始使用 TopoJSON。所以我有一张来自 US Census site 的美国县 map 。我只需为每个州和每个州的县添加 State Codes和 County Names使用 TopoJso
我在玩 topojson 时玩得很开心,但在 topojson 的 V1 中似乎没有定义 topojson.object,而在 V0 中支持它。有人可以解释我如何解决这个问题吗?我正在尝试为格式为 t
据我了解,D3 中的 topojson.presimplify(JSON) 根据其重要性将 Z 坐标添加到输入 topojson 形状中的每个点,然后允许使用它进行动态简化,如http://bl.oc
有没有人看过美国国会选区的 topoJSON 文件?或者,如果我可以找到坐标或 geoJSON 文件,是否容易转换为弧线? 最佳答案 官方制图边界更有可能作为 shapefile 而不是 GeoJSO
我是 d3.js 的新手,我想使用 TopoJSON 创建 map ,这是我在示例中读取 json 文件时出现的问题,如 us.json 中的以下内容。 "counties": {
我尝试根据两个坐标对(作为起点和着陆点)为单次飞行制作动画。但是我遇到了错误: Error: attribute d: Expected number, "...". 来自 d3.js。 我不认为 d
在下面的函数中,我这样做是有效的: var land = topojson.feature(europe, europe.objects.nuts1); 但如果我这样做,它就会崩溃: var
我已经安装了 topojson w/homebrew,并且正在研究与帖子 Troubleshooting topojson installation 中的用户相同的教程。但当我打电话时没有得到任何结果
您好,我在绘制 topojson map 时遇到了一些问题。我的 topojson 文件具有以下属性: {"type":"Topology","arcs":[[[6566,5055] ... "tra
我在 https://github.com/mbostock/topojson/tree/master/examples 注意到 world-110m.json 和 world-110m2.json没
我正在使用 topojson 转换现有的 GeoJSON 数据集,但它没有保留属性。它遵循标准的 GeoJSON 格式,并将属性放置在与几何图形相同级别的“属性”对象中(下面的片段),但是当 topo
给定一个 data.tsv 文件: id code name 1 AL Alabama 2 AK Alaska 4 AZ Arizona 5 AR Arkansas 6
Topojson-svg 试用:我试了一下... curl -o uk.topo.json 'http://bost.ocks.org/mike/map/uk.json' #get an online
我是这方面的新手,基本上对自己在做什么一无所知。(仅供引用,我正在完成本教程: http://bost.ocks.org/mike/map/ ) 我正在尝试让 topojson 工作。我已经成功安装了
我一直在评估在给定投影的情况下将像素空间与距离(以实际单位表示)联系起来的不同方法。我发现以下内容非常有帮助: var actual_map_bounds = d3.geo.bounds(this_t
您好,我正在尝试在 jupyter 笔记本中使用 Folium 渲染这张 map 。 https://github.com/kthotav/TopoJSON-Maps/blob/master/usa/
我是一名优秀的程序员,十分优秀!