Как этот код d3 будет обновлен с v3 до v4?

Question

Как этот код d3 будет обновлен с v3 до v4?

1

var url = 'https://gist.githubusercontent.com/
d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb5
6e36/us-states.json';

d3.json(url, function (error, data) {
    var path = d3.geo.path();
    svg.selectAll('path')
        .data(data.features)
        .enter()
        .append('path')
        .attr('d', path);
});

Я пытаюсь сохранить мой код как можно более актуальным, чтобы начать использовать d3v4, но многие учебники устарели.

Пример выше отлично работает с d3v3 (как показано здесь: http://bl.ocks.org/d3byex/378d68f27a1cc144aa8a)

Я знаю, что.geo.path() нужно будет обновить до.geoPath(), но мне не хватает хотя бы одного другого обновления, которое нужно сделать, чтобы это соответствовало d3v4.

David Merritt 14 сен. 2017, в 20:54

Источник

0

см. этот вопрос и ответ: stackoverflow.com/questions/38146012/… , относительно ваших атрибутов svg (при условии, что ваш код - это код в bl.ock)
Andrew Reid 14 сен. 2017, в 19:00
0

Похоже, что .attr (name [, value]) все еще действителен в v4 для единичных атрибутов.
David Merritt 14 сен. 2017, в 19:10
0

да, но ваш блок имеет: .attr({ width: width, height: height });
Andrew Reid 14 сен. 2017, в 19:14
0

Ах, хорошо, прости. Я должен был упомянуть, что написал по-другому: .attr('width', width) .attr('height', height);
David Merritt 14 сен. 2017, в 19:21
0

Нет проблем, извините за недопонимание и ложную информацию о .attrs
Andrew Reid 14 сен. 2017, в 19:37

Показать ещё 3 комментария

Теги:

javascript

d3.js

geojson

1 ответ

Ещё вопросы

см. этот вопрос и ответ: stackoverflow.com/questions/38146012/… , относительно ваших атрибутов svg (при условии, что ваш код - это код в bl.ock)
Похоже, что .attr (name [, value]) все еще действителен в v4 для единичных атрибутов.
да, но ваш блок имеет: .attr({ width: width, height: height });
Ах, хорошо, прости. Я должен был упомянуть, что написал по-другому: .attr('width', width) .attr('height', height);
Нет проблем, извините за недопонимание и ложную информацию о .attrs

Andrew Reid · Accepted Answer · 2017-09-14T18-12-00.000Z

В d3v3 d3.geo.path используется проекция по умолчанию, прогноз US Albers:

d3.geo.path()

Создает новый генератор географического пути с настройками по умолчанию: проекция albersUsa и радиус точки 4,5 пикселя. (ссылка)

В d3v4 проекция по умолчанию представляет собой нулевую проекцию:

path.projection([проекция]) <>

Если указана проекция, задается текущая проекция на указанную проекцию. Если проекция не указана, возвращает текущую проекцию, которая по умолчанию равна нулю. (ссылка)

Вот почему ваши данные масштабируются и центрируются соответственно на вашей карте d3v3, хотя это было бы не так, если бы это было где-то еще.

Проекция d3v4 по умолчанию для геопата просто преобразует координаты в данные в координаты svg без преобразования или проецирования. Следовательно, в d3v4 ваши данные нуждаются в правильной визуализации проекции (она нарисована, но поскольку все координаты x в США отрицательные, это за пределами экрана). Чтобы использовать проекцию по умолчанию из v3 (композитная проекция US Albers), вы можете использовать:

var projection = d3.geoAlbersUsa();
var path = d3.geoPath().projection(projection);

А потом идите обо всем остальном, как и вы:

        var width = 950, height = 500;
        var svg = d3.select('body')
            .append('svg')
            .attr("width",width)
            .attr("height",height);

        var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json';
        d3.json(url, function (error, data) {
            
            var projection = d3.geoAlbersUsa()
            var path = d3.geoPath().projection(projection);
            
            svg.selectAll('path')
                .data(data.features)
                .enter()
                .append('path')
                .attr('d', path);
        });

    <script src="http://d3js.org/d3.v4.min.js"></script>

Спасибо! Это объясняет это очень четко. После внесения изменений код работал. d3 такой замечательный инструмент! Может быть трудно узнать, какие элементы нужно обновить или нет из предыдущей версии.