D3 LineString между двумя объектами D3 центроида

У меня есть набор данных, который закодирован с помощью кода FIPS переписи для штатов и округов (т.е. Нью-Йорк - это FIPS 36, округ Кингс - это FIPS 36047). Я сопоставляю эти данные, используя проекцию d3.geo.albersUSA из файла TopoJSON, который использует коды FIPS в качестве идентификаторов для функций штата и округа. Это отлично подходит для хороплетов, где мне просто нужно присоединиться по ID.

Однако я хочу рисовать линии от центра тяжести одного объекта к другому, используя path.centroid(функция) и тип пути LineString. Вот упрощенный пример моих данных:

Start_State_FIPS, End_State_FIPS, Count_of_things
2,36,3
1,36,13
5,36,5
4,36,8
6,36,13
8,36,3

Я использую эти же данные для построения кругов на карте, используя поле count_of_things для установки радиуса. Это работает без проблем. Чтобы настроить линии, я создал карту var с кодом FIPS и центроидом объектов, затем использовал кодовую клавишу FIPS, чтобы извлечь начальные и конечные точки из моих данных.

Мой код рисует линии, но определенно не между точками центроида. Я не думал, что мне нужно что-то делать с проекцией точек, поскольку они исходят из функций, которые уже настроены для проекции карты, но, возможно, я ошибаюсь. Вот мой код:

var arclines = svg.append('g')

data_nested = d3.map(my_data)

var state_points = new Map();

var statesarc = topojson.feature(us, us.objects.states).features

statesarc.forEach(function(d) {
  state_points.set(d.id, path.centroid(d))
})

arcdata = []

data_nested.values().forEach(function(d) {
  arcline = {source: state_points.get(parseInt(d.Start_State_FIPS)), endpoint: state_points.get(parseInt(d.End_State_FIPS))}
  arcdata.push(arcline)
})

arclines.selectAll("path")
    .data(mydata)
  .enter.append("path")
    .attr('d', function(d) { return path({type: "LineString", coordinates: [d.source, d.endpoint]}) })

0 ответов

Другие вопросы по тегам