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

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

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

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

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

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

Спасибо,

Мортен


javascript svg maps d3.js
person user2414849    schedule 23.05.2013    source источник
comment
Похоже, ваша проекция не масштабируется с остальной частью карты. Попробуйте масштабировать проекцию методом zoom, чтобы она соответствовала масштабу всей карты.   -  person Brant Olsen    schedule 23.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

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

person Brant Olsen    schedule 01.10.2013