Попытка построить линейную диаграмму (несколько строк). Исходные данные были массивом таких объектов, как:
[{
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. Что я здесь делаю не так?
//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))
@Amy Если вы перейдете в код и проверите окно вывода, SVG состоит из групп путей с NaN.
Одно, не связанное с этим, похоже, что ваши группы путей добавляются вне вашего SVG.
@PeterCollingridge Ах, пришлось немного поискать, но я наконец их вижу. Спасибо. document.querySelectorAll("g > path")
@PeterCollingridge спасибо должно быть groups = svg.selectAll ("g")



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Основная проблема NaN -
let line = d3.line()
.x(d => xScale(d.year) )
.y(d => yScale(d.amount) );
Но это не единственная проблема графика.
Спасибо d путь теперь имеет значения. Не могли бы вы объяснить мне, что еще не так?
Где вы видите множество значений NaN?