D3.js 如何在D3中使用geojson文件更改点大小_D3.js

D3.js 如何在D3中使用geojson文件更改点大小

d3.js

D3.js 如何在D3中使用geojson文件更改点大小,d3.js,D3.js,我需要一点帮助。我认为这是一个原始的问题，但我真的被困在这一点上。我有一张d3的正交投影地图和一个geojson文件，其中包含代表地震的点。我能够显示这些点。它们大小一样。但我想更改每个点的大小，并参考geojson文件中的“mag”编号。有人能帮我吗？代码如下： <!DOCTYPE html> <meta charset="utf-8"> <meta http-equiv="refresh" content="300" /> <style> .

我需要一点帮助。我认为这是一个原始的问题，但我真的被困在这一点上。我有一张d3的正交投影地图和一个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>

感谢您花时间阅读本文和发表评论。

您可以使用路径执行以下操作：

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); });

非常感谢你，拉尔斯。我试过你的代码，但不知怎么的它不起作用。我在这里可能遗漏了一些愚蠢的东西。当我输入代码时，它不显示任何内容；到

var scale = d3.scale.sqrt().domain([minMag, maxMag]).range([2, 10]);
// ...
  .pointRadius(function(d) { return scale(d.properties.mag); });