D3.stack () TypeError: невозможно прочитать свойство undefined

Попытка построить Streamgraph в v5, но это так отличается от v3.

Имеет смысл иметь:

.x(function(d) { return formatDate.parse(d.Year);})
.y(function(d) { return +d["HIV/AIDS"] });

но я думаю, что это устаревший код d3 v3. Вместо этого я использую ключи.

console.info («Новые вложенные данные:», newData); дает слои: undefined

Что я делаю неправильно?

Codepen

Данные:

key: "Zambia"
values: Array(14)
0: {Country: "Zambia", Year: "Year 2000",  HIV/AIDS: 3042, …}
1: {Country: "Zambia", Year: "Year 2001",  HIV/AIDS: 3170, …}
2: {Country: "Zambia", Year: "Year 2002",  HIV/AIDS: 3159, …}

Код:

//Stack generator
var stack = d3.stack()
.keys(function(d){return +d["HIV/AIDS"]})
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone)

//Line generator 
let area= d3.area()
    .x(function(d) {
        return xScale(dateFormat(d.Year));
    })
    .y0(function(d){
        return yScale(d.y0);

    })
    .y1(function(d){
        return yScale(d.y0 + d.y)
    })
//group data by country name
    let newData = d3.nest()
        .key(function(d) {
            return d.Country;
        })
        .sortKeys(d3.descending)
        .sortValues(function(a, b) {
            return dateFormat(a.Year) - dateFormat(b.Year);
        })
        .entries(data);

var layers = stack(newData);
    console.info("layers", layers); 
//Define yScale domain after data loaded
yScale.domain([d3.max(data, function(d) {
    return +d["HIV/AIDS"]
}), 0]);


svg.selectAll("path")
    .data(layers)
    .enter()
    .append("path")
    .classed("line", true)
    .attr("d", function(d){
        return area(+d["HIV/AIDS"])
    })
    .style("fill", "url(#linear-gradient)")

Вы проходили документация для d3.stack()? Там есть простой пример того, как работают .keys и .value. И посмотрите на формат данных.

Shashank 20.12.2018 16:46

@Shashank, если я делаю .value(function(d){return +d["HIV/AIDS"]}), он возвращает пустой массив слоев [], я делаю .keys([function(d){return +d["HIV/AIDS"]}]), он возвращает [0, NaN, data: {…}

Alina Khachatrian 20.12.2018 21:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
506
0

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