Как визуализировать даты на оси x до 1900 года с помощью точечной диаграммы d3 .js

Question

На моем графике рассеяния d3 используются данные исторических дат в диапазоне от 1600 до настоящего времени.Я могу успешно построить свои точки, но не могу отобразить даты до 1900 года по оси X.

Я использую этот пример для создания диаграммы рассеяния в d3 , но мои данные имеют исторические даты до 1900 года. Я пытался реализовать это решение , но это возвращаетодна дата повторяется для каждой отметки

Если я пытаюсь реализовать d3.axisBottom (x), это возвращает даты из моих данных, но даты до 1900 года отформатированы неправильно.

У меня естьсделал плункер с полным кодом

Вот мой соответствующий масштаб и код оси (из планкра):

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

Мой график рассеяния в порядке, и точкикак и ожидалось.На оси х я хочу увидеть даты до 1900 года, например, 1750 года.

Очень благодарен за помощь.

Answer 1

Ссылочный ответ правильный, у вас есть другие проблемы в вашем коде. Я также немного обновил этот ответ, чтобы очистить код и включить общий пример с осью 1600-2000.

Первая проблема заключается в том, что вы определяете свою шкалу х:

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), это означает, что ось использует первый домен масштабов х, который по умолчанию равен [1 января 2000 г., 2 января 2000 г.], поэтому каждый тик будет иметь один и тот же год, если применить ось только с значением по умолчанию.domain.

Ваш код имеет .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