D3 - как метка оси X правильно

Question

Моя цель состоит в том, чтобы маркировать свою ось й с годами от 1960 до 2080 с шагом по 10. У меня есть CSV-файл, который выглядит следующим образом:

Land,1960,1970,1980,1990,2000,2010,2020,2030,2040,2050,2060,2070,2080 
Belgien,9128824,9660154,9855110,9947782,10239085,10839905,11824225,12885338,13918014,14758714,15400272,16027593,16614305 

до сих пор я получил этот результат (см рисунок)

Result Picture

Я не знаю, как правильно маркировать оси х. Вот мой код до сих пор:

d3.csv("/Data/temp_eu_popul.csv", function(e, eu_popul) { 
console.log(eu_popul); 


var years = [1960,1970,1980,1990,2000,2010,2020,2030,2040,2050,2060,2070,2080]; 
    console.log(years); 

var population = []; 
    for(var i = 1960; i<=2080; i+= 10){ 
    population.push(parseFloat(eu_popul[0][i])); 
    } 
console.log(population); 

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

var y = d3.scaleLinear() 
    .domain(d3.extent(population)) 
    .range([250, -50]); 

var x = d3.scaleLinear() 
    .domain([0,years.length]) 
    .range([100, 450]); 

var yAxis = d3.axisLeft(y); 
    svg.append('g') 
     .attr("transform", "translate(75,150)") 
     .attr('class', 'y axis') 
     .call(yAxis); 

var xAxis = d3.axisBottom(x); 
svg.append('g') 
    .attr("transform", "translate(0,450)") 
    .attr('class', 'x axis') 
    .call(xAxis); 

var circles = svg.selectAll("cirle").data(population).enter().append("circle") 
.attr("cx", function(d,i){ return x(i); }) 
.attr("cy", function(d,i){ return 350-y(d); }) 
    .attr("r", 2); 
}); 

Я thougth путь является изменение:

var x = d3.scaleLinear() 
    .domain(d3.extent(years)) 
    .range([100, 450]); 

var circles = svg.selectAll("cirle").data(population).enter().append("circle") 
.attr("cx", years) 
.attr("cy", function(d,i){ return 350-y(d); }) 
    .attr("r", 2); 
}); 

Другое дело, что я создал дополнительный массив за годы. Но я уверен, что есть лучший способ обойти это. Потому что годы уже находятся в csv-файле. Могу ли я каким-то образом использовать их, не создавая дополнительный массив?

Answer 1

Попробуйте это:

var x = d3.scaleLinear() 
    .domain(d3.extent(years)) // or .domain(d3.extent(eu_popul[1])) 
    .range([100, 450]); 

var xAxis = d3.axisBottom(x); 
svg.append('g') 
    .attr("transform", "translate(0,450)") 
    .attr('class', 'x axis') 
    .call(xAxis); 

var circles = svg.selectAll("circle").data(population).enter().append("circle") 
.attr("cx", function(d,i){ return x(years[i]); }) 
.attr("cy", function(d,i){ return 350-y(d); }) 
    .attr("r", 2); 
}); 

Answer 2

Ваших х масштабы оси можно рассматривать в вашем случае, как порядковая шкала, так что вам нужно использовать

x = d3.scaleOrdinal().domain(years).range([min, max])

, где мин и max - ваши собственные значения для размера x, которые будут сопоставлять ваши точные годы с значениями пикселей x.

Для "сх" звонки, то вы должны использовать .attr('cx', function(d) {return x(d)})

или более лаконично, .attr('cx', x)

, который d3 сокращенная за то же самое.

У вас также есть орфографическая ошибка в вашей переменной circles, вы выбрали все «cirle»!

Кроме того, я думаю, что ваши данные в формате CSV в идеале должны быть в вертикальном, а не горизонтальном формате:

Land, Belgien 1960, 9128824

т.д.

, а затем вы можете получить доступ к свойствам d.Land и d.Belgien везде, где вы хотите соответствующие номера влияют на вашу разметку из анонимного определения function(d,i){}, и вы можете построить свой массив лет, например, используя

var years = eu_popul.map(function(d) {return d.Land});