Circle clip and projection with D3 orthographic

丶灬走出姿态 提交于 2019-11-28 06:04:36

Instead of using <circle> elements, you can use GeoJSON point geometries:

{type: "Point", coordinates: [λ, φ]}

These can then be clipped via D3’s projection system, depending on the clipAngle that you’ve set. So you might have something like:

var path = d3.geo.path().projection(…);

data.forEach(function(d) {
  svg.append("path")
      .datum({type: "Point", coordinates: [d.Lon, d.Lat]})
      .attr("d", path.pointRadius(d.Magnitude));
});

Note how the radius of the point is set via the path for each point. You can also set the pointRadius to be a function, so you could do something like:

var path = d3.geo.path()
    .projection(…)
    .pointRadius(function(d) { return d.radius; });

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude};
    })
    .attr("class", "point")
    .attr("d", path);

The second part of your question asks whether the circles can be true geographic circles. d3.geo.circle can generate geographic circle features (again, as GeoJSON), which will be properly clipped:

var path = d3.geo.path().projection(…),
    circle = d3.geo.circle();

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return circle
           .origin([d.Lon, d.Lat])
           .angle(d.Magnitude)();
    })
    .attr("class", "point")
    .attr("d", path);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!