D3 добавление элемента в увеличенную карту

Question

У меня есть карта, где круги (происхождение людей) появляются при нажатии на легенду.

Кроме того, можно увеличивать масштаб, а затем круги (и путь страны) преобразуются (используя d3.behavior.zoom).

Хотя, если я сначала увеличу, а затем щелкните по легенде, круги не появятся в нужных местах. Как я могу решить эту проблему и добавить ее в нужные координаты (в пределах увеличенной карты).

Любые идеи? Я уверен, что решение не так сложно, но я застрял.

См. (http://wahrendorf.de/circlemapping/world_question.html) для примера.

Спасибо,

Morten

Answer 1

Вы должны принять во внимание d3.event.translate и d3.event.scale при рисовании кругов. Самый простой способ сделать это - выставить функцию масштабирования так, чтобы она могла быть вызвана функцией рисования круга.

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 значения, так как они будут неопределенными, когда вы рисуете круги.