我需要一点帮助。我认为这是一个原始问题，但我真的被困在这一点上。我在 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); });
