我有一个地图,在单击图例时会出现圆形(人员起点)。
此外,可以进行缩放,然后,圆形(和国家路径)会被转换(使用d3.behavior.zoom)。
不过,如果我先缩放,然后再单击图例,圆圈就不会出现在正确的位置。如何解决这个问题并在缩放地图的正确坐标处附加它们?
有什么想法吗?我相信解决方案并不难,但我卡住了。
请参见示例 (http://wahrendorf.de/circlemapping/world_question.html)。
谢谢,
Morten
我有一个地图,在单击图例时会出现圆形(人员起点)。
此外,可以进行缩放,然后,圆形(和国家路径)会被转换(使用d3.behavior.zoom)。
不过,如果我先缩放,然后再单击图例,圆圈就不会出现在正确的位置。如何解决这个问题并在缩放地图的正确坐标处附加它们?
有什么想法吗?我相信解决方案并不难,但我卡住了。
请参见示例 (http://wahrendorf.de/circlemapping/world_question.html)。
谢谢,
Morten
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
值,因为在绘制圆圈时它们将未定义。