Проблемы с построением на Bostock d3 choropleth .tsv пример - PullRequest
Новая
       27

Проблемы с построением на Bostock d3 choropleth .tsv пример

0 голосов
/ 02 сентября 2018

Я был озадачен тем, что, как я надеялся, будет незначительным изменением микропрограммы Майка Бостока по безработице (https://bl.ocks.org/mbostock/4060606): добавление названий округов и сокращений штатов в файл .tsv.

Я создал новый уроки безработицы, объединив оригинал Бостока со списком кодов, названий и штатов, удостоверяющих личность, из бюро переписи. Образец: 

id    rate    state    county
01001    5.1    AL    Autauga County
01003    4.9    AL    Baldwin County
...
56043    4.5    WY    Washakie County
56045    4.9    WY    Weston County

В javascript я изменил блок d3.queue () следующим образом, пытаясь получить доступ к столбцам состояния и графства: 

d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.defer(d3.tsv, "unemployment2.tsv", function(d) {
    unemployment.set(d.id, +d.rate, d.county, d.state);
    county = d.county;
    state = d.state;
     })
.await(ready);

Затем я изменил строку всплывающей подсказки блока svg.append следующим образом: 

.text(function(d) { return d.id + " - " + county + ", " + state + " - " + d.rate + "%"; });

Получившаяся карта имеет доступ к новым столбцам в файле .tsv, но во всплывающей подсказке отображается округ и штат только с последней строки (округ Уэстон, WY), независимо от того, на какую страну вы навели указатель мыши. (Как ни странно, поля id и rate do отражают правильный округ во всплывающей подсказке.)

На моем сервере наблюдается то же поведение, что и на Plunker (https://plnkr.co/edit/vrm4FuBVEQc7lCSnbytl?p=preview).

Ценю любую информацию о том, что я делаю неправильно / как исправить.

1 Ответ

0 голосов
/ 03 сентября 2018

Для этого вам нужно понять, как работает d3.map(). Карта d3 создает пары записей ключей, map.get("key") возвращает значение, связанное с этим ключом. Для создания записи на карте мы используем map.set("key",value). В своем блоке кода вы используете: 

unemployment.set(d.id, +d.rate, d.county, d.state);

Где unemployment - ваша карта, а d - строка в ТСВ. Используя это, мы устанавливаем значение, связанное с каждым ключом (d.id), равным d.rate, что является только одной частью данных, которые мы хотим получить в исходном примере. Дополнительные параметры d.county и d.state здесь игнорируются.

Вместо этого мы могли бы использовать: 

unemployment.set(d.id, d);

Это установит ключ равным d.id, как указано выше, но теперь значением является вся строка tsv, которую мы хотим: 

unemployment.get("06071"); // { id: "06071", rate: "6.2", state: "CA", county: "San Bernardino County" }

В исходном примере значением на карте была строка, но теперь это объект, представляющий строку в tsv, поэтому нам нужно обратиться к нескольким строкам в исходном примере: 

.attr("fill", function(d) { return color(unemployment.get(d.id)); })

Становится: 

.attr("fill", function(d) { return color(unemployment.get(d.id).rate); })

Так как нам нужно получить доступ к свойству rate сопоставленного значения.

А для всплывающей подсказки мы можем использовать: 

 .text(function(d) { var datum = unemployment.get(d.id); return "ID: " + datum.id + " - " + datum.county + ", " + datum.state + " - " + "Rate: " + datum.rate + "%"; });

Что дает нам это .

...