javascript - 在 D3 投影上绘图

Question

使用this作为基础，如何添加标记？我可以从 csv 添加点，但它们不会随地球旋转。

在drawMap函数中，我添加了:

d3.csv("cities.csv", function(error, data) {
    console.log(data);
    svg.selectAll(".pin")
      .data(data)
      .enter().append("circle", ".pin")
      .attr("r", 2)
      .attr("transform", function(d) {
        return "translate(" + projection([
          d.lat,
          d.lon
        ]) + ")"
      });    

});

这可以固定点，但它们是静态的。完整脚本如下...

var degrees = 180 / Math.PI,
    width = 1000,
    height = 600;

var loader = d3.dispatch("world"), id = -1;

d3.selectAll("#map")
    .data([
      orthographicProjection(width, height)
          .scale(245)
          .translate([width / 2, height * .495]),
      d3.geo.eisenlohr()
          .precision(.1)
          .clipExtent([[1, 1], [width - 1, height - 1]])
          .translate([width / 2, height / 2])
          .scale(75)
          .rotate([0, -30])
    ])
  .append("svg")
    .attr("width", width)
    .attr("height", height)
    .each(function(projection) {
      var path = d3.geo.path().projection(projection),
          svg = d3.select(this).call(drawMap, path, true);
      svg.selectAll(".foreground")
          .call(d3.geo.zoom().projection(projection)
            .scaleExtent([projection.scale() * .7, projection.scale() * 10])
            .on("zoom.redraw", function() {
              d3.event.sourceEvent.preventDefault();
              svg.selectAll("path").attr("d", path);
            }));
      loader.on("world." + ++id, function() { svg.selectAll("path").attr("d", path); });
    });

(function() {
  var width = 350, height = 350,
      projection0 = orthographicProjection(width, height),
      projection1 = orthographicProjection(width, height),
      path0 = d3.geo.path().projection(projection0),
      path1 = d3.geo.path().projection(projection1);


  function redrawComparison1() { comparison1.selectAll("path").attr("d", path1); }
})();



d3.json("../world-110m.json", function(error, world) {
  d3.selectAll("svg").insert("path", ".foreground")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land");
  d3.selectAll("svg").insert("path", ".foreground")
      .datum(topojson.mesh(world, world.objects.countries))
      .attr("class", "mesh");

  loader.world();
});





function drawMap(svg, path, mousePoint) {
  var projection = path.projection();

  svg.append("path")
      .datum(d3.geo.graticule())
      .attr("class", "graticule")
      .attr("d", path);

  svg.append("path")
      .datum({type: "Sphere"})
      .attr("class", "foreground")
      .attr("d", path)
      .on("mousedown.grab", function() {
        var point;
        if (mousePoint) point = svg.insert("path", ".foreground")
            .datum({type: "Point", coordinates: projection.invert(d3.mouse(this))})
            .attr("class", "point")
            .attr("d", path);
        var path = d3.select(this).classed("zooming", true),
            w = d3.select(window).on("mouseup.grab", function() {
              path.classed("zooming", false);
              w.on("mouseup.grab", null);
              if (mousePoint) point.remove();
            });
      });
d3.csv("cities.csv", function(error, data) {
    console.log(data);
    svg.selectAll(".pin")
      .data(data)
      .enter().append("circle", ".pin")
      .attr("r", 2)
      .attr("transform", function(d) {
        return "translate(" + projection([
          d.lat,
          d.lon
        ]) + ")"
      });


});

}
function orthographicProjection(width, height) {
  return d3.geo.orthographic()
      .precision(.5)
      .clipAngle(90)
      .clipExtent([[1, 1], [width - 1, height - 1]])
      .translate([width / 2, height / 2])
      .scale(width / 2 - 10)
      .rotate([0, -30]);
}

Answer 1

我理解你的沮丧。

试试这个:

d3.csv("data/cities.csv", function(error, data) {
  data.forEach(function(d){
     svg.insert("path", ".foreground")
    .datum({type: "Point", coordinates: [d['lon'], d['lat']]})
    .attr("class", "point")
    .attr("d", path);
  });
});

您需要将“d”元素分配给变量路径。 在示例的前面，路径绑定(bind)到函数 d3.geo.path()，这就是将其链接到投影的原因。

对我来说，突破性的线索在这里提供: Circle clip and projection with D3 orthographic