javascript - D3 - 如何正确标记 x 轴

Question

我的目标是用从 1960 到 2080 的年份标记我的 x 轴，步长为 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

我不知道如何正确标记 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);
});

我认为要走的路是改变:

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 轴刻度可以被视为序数刻度，因此您需要使用

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

，其中 min 和 max 是您自己的 x 范围值，它将您的确切年份映射到像素 x 值。

对于“cx”调用，您应该使用.attr('cx', function(d) {return x(d)})

或者更简洁地说，.attr('cx', x)

这是同一事物的 d3 简写。

您的 circles 变量中也存在拼写错误，您选择了所有“circle”!

此外，我认为您的 csv 数据理想情况下应该采用垂直格式而不是水平格式:

土地，比利时
1960, 9128824

等等

然后，您可以在匿名 函数中访问属性 d.Land 和 d.Belgien，无论您希望相应的数字影响您的标记(d,i){} 定义，您可以使用

构建您的年份数组

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