D3 - X 축 레이블을 얼마나 제대로

Question

내 목표는 내가 다음과 같습니다 .csv 파일이 10 에 의해 단계에서 2080에 1960 년 내 X 축 레이블을하는 것입니다

:

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

내가 제대로 x 축 레이블을하는 방법을 모르는이 결과를 얻었다.

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

이 시도 :

당신이

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

을 사용해야합니다 귀하의 X 축 스케일, 서수 규모로 경우에 생각할 수있다

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

경우 분, max는 픽셀 x 값으로 정확한 연도를 매핑하는 x 범위의 고유 한 값입니다. 은 "CX"를

는 다음 .attr('cx', function(d) {return x(d)})

이상의 간결, 같은 일에 대한 D3 속기입니다 .attr('cx', x)

를 사용해야합니다 호출합니다.

circles 변수에 맞춤법 오류가 있으므로 모든 "cirle"을 선택했습니다!

또한, 당신의 CSV 데이터를 이상적으로 가로 형식이 아닌 수직으로해야한다고 생각 :

Land, Belgien 1960, 9128824

등

을 한 다음은 속성 d.Land 및 d.Belgien 당신이 원하는 목적지에 액세스 할 수 있습니다 익명의 function(d,i){} 정의 내에서 해당 마크 업에 영향을 미치는 숫자 및

를 사용하여 연도 배열을 구성 할 수 있습니다.

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