D3向缩放地图添加元素

Question

我有一个地图，在单击图例时会出现圆形（人员起点）。

此外，可以进行缩放，然后，圆形（和国家路径）会被转换（使用d3.behavior.zoom）。

不过，如果我先缩放，然后再单击图例，圆圈就不会出现在正确的位置。如何解决这个问题并在缩放地图的正确坐标处附加它们？

有什么想法吗？我相信解决方案并不难，但我卡住了。

请参见示例 (http://wahrendorf.de/circlemapping/world_question.html)。

谢谢,

Morten

- user2414849

---

看起来你的投影没有随着地图的缩放而进行缩放。尝试在“zoom”方法中对投影进行缩放，以使其与整个地图的缩放保持一致。 - Brant Olsen

Answer 1

你在绘制圆形时需要考虑到和。最简单的方法是将缩放函数因式分解，以便它可以被圆形绘制函数调用。

var translate = [0,0];
var scale = 1;
var zoom_function = function() {
    canvas.selectAll("path")
             .attr("transform","translate("+translate.join(",")+")scale("+scale+")");

    canvas.selectAll("circle.origin")
             .attr("transform","translate("+translate.join(",")+")scale("+scale+")")
             .attr("r", function(d) { return radius/scale; });
};
var zoom = d3.behavior.zoom().scaleExtent([1,6])
           .on("zoom",function() {
              translate = d3.event.translate;
              scale = d3.event.scale;
              zoom_function();
});

// ... The rest of the code ...

canvas.append("text")
      .text("show circles")
      .attr("x", 30 ) .attr("y", 480 )
      .attr("dy", ".35em")
      .on("click", function(d)  {
          /// load data with long/lat of circles
          d3.csv("./World_files/places_q.csv", function(error, origin) {
              canvas.selectAll("circle.origin").remove();
              canvas.selectAll("circle.origin")
            .data(origin)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d) {return projection([d.originlong, d.originlat])[0];})
                    .attr("cy", function(d) {return projection([d.originlong, d.originlat])[1];})
                    .attr("r", 2)
                    .style("fill", "red")
                    .style("opacity", 0.5)
                    .attr("class", "origin");
              // Call the zoom function here to fix the placement of the circles.
              zoom_function();
          });
    });

你需要跟踪最后已知的d3.event.translate和d3.event.scale值，因为在绘制圆圈时它们将未定义。

- Brant Olsen