Question

我的目标是用1960年到2080年的X轴标记我的x轴。我有一个.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轴刻度可以在您的情况下视为序数刻度，因此您需要使用

import numpy numpy.where(numpy.in1d(x, [2,3])) # (array([2, 3]),)

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

对于＆＃34; cx＆＃34;你应该使用的电话 x = d3.scaleOrdinal().domain(years).range([min, max])

或更简洁， .attr('cx', function(d) {return x(d)})

这是同一件事的d3简写。

您的.attr('cx', x)变量中也存在拼写错误，您已选择所有＆＃34; cirle＆＃34; s！

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

circles

等

然后您可以在匿名Land, Belgien 1960, 9128824定义中的任何地方访问属性d.Land和d.Belgien，以便相应的数字影响您的标记，并且您可以构建年份数组例如，使用

function(d,i){}

Answer 2

试试这个：

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);
});

D3 - 如何正确标记x轴

2 个答案: