D3 путь d = MNaN, NaNLNaN, NaN

Попытка построить линейную диаграмму (несколько строк). Исходные данные были массивом таких объектов, как:

[{
    2010: 8236.082,
    countryName: "Afghanistan"
}]

Для каждой строки требовался массив пар x / y [[x,y],[x,y]]. Мои x и y - это выбросы year и amount. Это означает, что мне пришлось реструктурировать свои данные, чтобы они выглядели так:

[
     {
         country: "Afganistan",
         emissions: [
             { year: 2019, amount: 8236.082 }
         ]
     }
]

После обмена данными я застрял на пути d = MNaN, NaNLNaN, NaN. Что я здесь делаю не так?

Codepen

//Define full width, full height and margins
let fullWidth = 600;
let fullHeight = 700;
let margin = {
    top: 20,
    left: 70,
    bottom: 100,
    right: 10
}

//Define line chart with and height 
let width = fullWidth - margin.left - margin.right;
let height = fullHeight - margin.top - margin.bottom;

//Define x and y scale range
let xScale = d3.scaleLinear()
    .range([0, width])

let yScale = d3.scaleLinear()
    .range([0, height])

//Draw svg
let svg = d3.select("body")
    .attr("width", fullWidth)
    .attr("height", fullHeight)
    .append("svg")
    .append("g")

d3.json("https://api.myjson.com/bins/izmg6").then(data => {
    console.info(data);



    //Structure data so should be an array of arrays  etc [[x,y], [x,y], [x,y]]

    let years = d3.keys(data[0]).slice(0, 50);
    console.info(years);

    let dataset = [];

    data.forEach((d, i) => {

        let myEmissions = [];

        years.forEach(y => {
            if (d[y]) {

                myEmissions.push({
                    year: y,
                    amount: d[y]
                })
            }
        })

        dataset.push({
            country: d.countryName,
            emissions: myEmissions
        });
    })

    console.info(dataset);

    //Define x and y domain
    xScale
        .domain(d3.extent(years))

    yScale
        .domain([d3.max(dataset, d =>
        d3.max(d.emissions, d =>
            +d.amount)), 0])


        //Generate line
    let line = d3.line()
                .x(d => {
                    xScale(d.year);
                })
                .y(d => {
                    yScale(d.amount);
                });


    let groups = d3.selectAll("g")
        .data(dataset)
        .enter()
        .append("g")

    groups.append("title")
        .text(d => d.country)

    groups.selectAll("path")
        .data(d => [d.emissions])
        .enter()
        .append("path")
        .attr("d", line)
        .attr("class", line)

}).catch(error => console.info(error))

Где вы видите множество значений NaN?

user47589 08.11.2018 15:35

@Amy Если вы перейдете в код и проверите окно вывода, SVG состоит из групп путей с NaN.

Peter Collingridge 08.11.2018 15:46

Одно, не связанное с этим, похоже, что ваши группы путей добавляются вне вашего SVG.

Peter Collingridge 08.11.2018 15:51

@PeterCollingridge Ах, пришлось немного поискать, но я наконец их вижу. Спасибо. document.querySelectorAll("g > path")

user47589 08.11.2018 15:54

@PeterCollingridge спасибо должно быть groups = svg.selectAll ("g")

Edgar Kiljak 08.11.2018 15:55
Поведение ключевого слова "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) для оценки ваших знаний,...
2
5
638
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основная проблема NaN -

let line = d3.line()
   .x(d => xScale(d.year) )
   .y(d => yScale(d.amount) );

Но это не единственная проблема графика.

Спасибо d путь теперь имеет значения. Не могли бы вы объяснить мне, что еще не так?

Edgar Kiljak 08.11.2018 16:08

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