Question

我的d3散点图使用从1600到现在的历史数据。我可以成功绘制点，但无法显示x轴1900年之前的日期。

我正在使用此example to make a scatterplot in d3，但是我的数据具有1900年以前的历史日期。我尝试实现this solution，但这将为每个刻度线重复一个日期

如果我尝试实现d3.axisBottom（x），则会返回数据中的日期，但是1900年之前的日期格式不正确。

我用完整的代码制作了一个plunker

这是我相关的比例尺和轴代码（来自plunkr）：

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x).ticks(10).tickFormat(function(d){return timeFormat(d);});
var yAxis = d3.axisLeft(y).ticks(10);

var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) {return (d.dates);}))
  .range([ 0, width ]);

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  //.call(xAxis, function (d){return (d);});
  //.call(xAxis, function (d){return (d.dates);}); // returns just a single date for all tick marks
 .call(d3.axisBottom(x)); // partially correct dates but not formatting dates prior to 1900

我的散点图很好，点也如预期。我想在x轴上看到的是1900年以前的日期，例如1750年。

非常感谢您的帮助。

Answer 1

所引用的答案是正确的，您的代码中还有其他问题。 我还更新了答案，以清理代码，并包括一个轴为1600-2000的通用示例。

第一个问题是您定义x比例尺：

var x = d3.scaleTime().range([0, width]);

然后几乎立即定义轴：

var xAxis = d3.axisBottom(x)
  .tickFormat(timeFormat);

然后，您定义x域，同时使用以下方法重新定义x：

var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) {return (d.dates);}))
  .range([ 0, width ]);

如果我们使用svg.call(xAxis)，则表示轴正在使用第一个x缩放域，默认域为[2000年1月1日，2000年1月2日]，这就是为什么如果您将每个刻度线都具有相同的年份仅应用默认域的轴。

您的代码具有.call(d3.axisBottom(x)而不是.call(xAxis)，它会再次创建一个新轴，但是没有呈现1900年前日期所需的格式

相反，请先确定比例的范围，然后创建轴：

var x = d3.scaleTime()
  .range([0, width])
  .domain(d3.extent(data, function(d) {return (d.dates);}))

var xAxis = d3.axisBottom(x)
  .tickFormat(timeFormat);

现在您可以仅应用轴：

selection
  .attr("transform",...)
  .call(xAxis);

这是更新的plunkr

如何使用d3 .js散点图在1900年前的x轴上显示日期

1 个答案: