个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我需要一点帮助。我认为这是一个原始问题，但我真的被困在这一点上。我在 d3 中有一张正射投影 map 和一个包含代表地震的点的 geojson 文件。我能够显示要点。它们具有相同的尺寸。但我想根据 geojson 文件中的“mag”编号更改每个点的大小。有人可以帮我吗？这是代码:
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="refresh" content="300" />
<style>
.graticule {
fill: none;
stroke: black;
stroke-width:.5;
opacity:.1;
}
.land {
fill: rgb(117, 87, 57);
stroke: black;
stroke-opacity: .2;
}
</style>
<body>
<body background="space5.jpg">
<div id="map"></div>
<script src="d3.v3.min.js"></script>
<script src="topojson.v0.min.js"></script>
<script>
var diameter = 700,
radius = diameter/2,
velocity = .005,
then = Date.now();
var projection = d3.geo.orthographic()
.scale(radius - 2)
.translate([radius, radius])
.clipAngle(90);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geo.path()
.projection(projection)
var ocean_fill = svg.append("defs").append("radialGradient")
.attr("id", "ocean_fill")
.attr("cx", "75%")
.attr("cy", "25%");
ocean_fill.append("stop").attr("offset", "55%").attr("stop-color", "#ddf");
ocean_fill.append("stop").attr("offset", "100%").attr("stop-color", "#9ab");
//Load sphere
var globe = {type: "Sphere"};
svg.append("path")
.datum(globe)
.attr("d", path)
.style("fill", "url(#ocean_fill)");
//graticule
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
//Load countries
d3.json("world-110m.json", function(error, topology) {
var land = topojson.object(topology, topology.objects.countries),
globe = {type: "Sphere"};
svg.insert("path")
.datum(topojson.object(topology, topology.objects.countries))
.attr("class", "land")
.attr("d", path);
});
//Load earthquakes
d3.json("2.5_day.geojson", function(json) {
svg.selectAll("path.day")
.data(json.features)
.enter()
.append("path")
.attr("d",path)
.style("fill", "red")
});
//rotate everything
d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
svg.selectAll("path")
.attr("d", path);
});
</script>
</body>
</html>
这是 geojson 文件的一部分(只有一点):
{
type: "FeatureCollection",
metadata: {
generated: 1396609484000,
url: http://...,
title: USGS magnitude,
api: String,
count: Integer,
status: Integer
},
features: [
{
type: "Feature",
properties: {
mag: 5.2,
place: 70km SW of Iquique, Chile,
time: 1396605206040,
updated: 1396606883841,
tz: Integer,
url: String,
detail: String,
felt:Integer,
cdi: Decimal,
mmi: Decimal,
alert: String,
status: String,
tsunami: Integer,
sig:Integer,
net: String,
code: String,
ids: String,
sources: String,
types: String,
nst: Integer,
dmin: Decimal,
rms: Decimal,
gap: Decimal,
magType: String,
type: String
},
geometry: {
type: "Point",
coordinates: [
longitude,
latitude,
depth
]
},
id: String
},
...
]
}
感谢您花时间阅读本文并提出意见。
最佳答案
您可以使用 .pointRadius() function的 path 来做到这一点:
var path = d3.geo.path()
.projection(projection)
.pointRadius(function(d) { return d.properties.mag; });
您可能还希望有一个比例来将数据映射到圆圈大小，例如
var scale = d3.scale.sqrt().domain([minMag, maxMag]).range([2, 10]);
// ...
.pointRadius(function(d) { return scale(d.properties.mag); });
关于d3.js - 如何在 D3 中使用 geojson 文件更改点大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23109330/
25
4
0
我正在尝试按照此链接 http://bost.ocks.org/mike/map/ 上的教程进行操作到目前为止，我已经完全按照列出的每条说明进行操作，但是当我尝试运行“#Converting Data
何我可以反转一个国家的 GeoJson，以便它将国家定义为世界地图多边形中的一个洞？我需要这个来在 OpenLayers 5.3 中创建 GeoJson VectorLayer 的蒙版。 最佳答案 在
我在构建 GeoJSON 并将其放在 map 上的传单代码方面遇到了一些麻烦。 GeoJSON 是根据服务的 XML 响应构建的。 错误是 无效的 GeoJSON 对象。 throw new Erro
我有一个 geojson 表示插值天气数据的等高线层。某些轮廓在更高的缩放级别消失，如以下屏幕抓图所示。 将多边形作为图层添加到 Mapbox 时，使用以下代码: map.addSource('min
我有一些地理边界 have a GeoJSON endpoint for . 我还有一些变量存储在单独的 GeoJSON endpoint 中它没有坐标，但确实有我想稍后使用 D3 对 map 进行主
我是 MapBox GL Js 的新手，我想通过 https 调用一个大的 GeoJSON 文件并将其显示到 map 上。 我认为调用 vector Tile 是最好的方法，我找到了一些教程，展示了如
我已经使用 SQL 到 geoJSON 生成了我的数据库的一些兴趣点。 地理数据: { "FeatureCollection" : [ { "g
创建一张与此处找到的 map 类似的 map : https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardi
我对 ammCharts 比较陌生，这也是我第一次尝试创建 geoJSON 文件。 以下是我的geoJson文件: GeoJSON file 这就是我要实现的目标: example 当我加载我的 ge
我有几个 geojson 层，并且我使用组将其分层。我使用此处找到的 Mike 答案将 map 集中在给定的 geojson 文件上 -> Center a map in d3 given a geo
环回新手，但设置我的第一个基于节点的 RestAPI 很有趣。我能够创建模型并在数据存储中创建关联的表。我的模型需要具有数据类型 geojson 的属性，即以下形式的字符串: { “类型”:“特征”，
我使用传单构建了一个 map ，其中包含大的 GeoJSON 区域，这些区域由多个“较小”的 GeoJSON 区域组成。 我正在使用 Leaftet-Ajax 来这样调用它们: var Rennes
我已经能够让其中的一部分工作，但是当 properties.affectedZones 有多个条目时，我的 jQuery 失败了。我已经使用 .each 努力显示受到红旗警告的受影响区域，但是当有两个
我需要对从 geojson 文件中提取的每个功能进行不同的样式设置。然而，这个匿名样式函数仅更改它遇到的第一个功能的样式并停止。我是传单新手。看过几个演示，但找不到这个匿名样式函数仅更改第一个功能的样
我有多个 geojson 类型:存储在 Mysql 中的 FeatureCollection。我想将两个或多个 geojson 合并到一个 FeatureCollection geojson 中并显示
我有这个 geojson { "type":"FeatureCollection", "features":[ { "type":"Feature",
我正在尝试在基于标准 HelloWorld 示例应用程序的测试应用程序中加载以下 geoJson 文件。 { "type": "FeatureCollection", "generator":
我正在使用 GeoJSON 数据构建传单 map 。尝试根据 GeoJSON 属性设置我使用的图标时遇到问题。我认为我的错误与使用字符串调用对象有关，但我无法弄清楚它到底是什么。 这是我的代码: Ge
我有包含如下地理字段的文档。 "geo" : { "type" : "Point", "coordinates" : [ 37.44609999, -1
是否可以仅使用 JavaScript(通过 d3、topojson 或任何其他方式)确定给定纬度、经度的 GeoJSON 点是否位于给定 GeoJSON 多边形内？ 例如，我可以根据教程 here 绘
我是一名优秀的程序员,十分优秀！