Нанесение точек с помощью d3.geo.tile

Я расширил код в этом примере:

http://bl.ocks.org/mbostock/5914438

Но я не могу понять, как разместить точки на этой карте таким образом, чтобы их можно было интегрировать в увеличение. Пути работают нормально, но похоже, что модифицированную проекцию нельзя использовать для проецирования координат точек, а в функции масштабирования добавление scale() к transform() при применении к элементу, содержащему точки, кажется, масштабируется точки настолько велики, что заполняют весь экран. Вот мои дополнительные баллы:

var sitesG = svg.append("g").attr("id","sitesG");
var osites = sitesG.selectAll(".sites")
 .data(sites)
 .enter()
 .append("g")
 .attr("transform", function(d) {return "translate(" + projection([d.x,d.y]) + ")scale(" + projection.scale() + ")"})

osites.append("circle").attr("r", 10)

А вот функция в zoomed():

d3.select("#sitesG")
  .attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")

Я пробовал это и с отдельными элементами для сайтов, но безуспешно. У кого-нибудь есть пример, который ставит точки на geo.tile?


d3.js topojson
person Elijah    schedule 03.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Мне удалось разобраться. Моя основная проблема заключалась в том, что я не масштабировал атрибут «r» кругов, чтобы он соответствовал zoom.scale(), когда я правильно проецировал точки, из-за чего они имели радиус 13 000 пикселей +.

Вы можете увидеть, как это работает здесь: http://bl.ocks.org/emeeks/6147081.

person Elijah    schedule 03.08.2013
comment
Я знаю, что это старый пост, но я следил за вашим примером блока и столкнулся с ошибкой, когда пути являются простыми путями точка-точка. Сделал сообщение SO здесь: stackoverflow.com/questions/49283086/ Я не совсем уверен, что происходит, но если у вас есть какие-то мысли, которыми можно поделиться, это было бы действительно ценно. - person iamnobody; 15.03.2018