Блог

Главная - Вопросы по программированию - Неправильная ось D3

Неправильная ось D3

#d3.js

#d3.js

Вопрос:

Используя этот пример, я получаю неправильную ось. На оси показаны метки для 50 000, 00 000, 50 000 и т.д., Но мои данные относятся к 0 — 513836. Вот как выглядит ось:

введите описание изображения здесь

Вот мой код и данные:

 data = [{
  "value": "478176",
  "date": "2020-06-28"
}, {
  "value": "478278",
  "date": "2020-06-29"
}, {
  "value": "478559",
  "date": "2020-06-30"
}, {
  "value": "478559",
  "date": "2020-07-01"
}, {
  "value": "479175",
  "date": "2020-07-02"
}, {
  "value": "479175",
  "date": "2020-07-03"
}, {
  "value": "479175",
  "date": "2020-07-04"
}, {
  "value": "479379",
  "date": "2020-07-05"
}, {
  "value": "479633",
  "date": "2020-07-06"
}, {
  "value": "480010",
  "date": "2020-07-07"
}, {
  "value": "480531",
  "date": "2020-07-08"
}, {
  "value": "480794",
  "date": "2020-07-09"
}, {
  "value": "480794",
  "date": "2020-07-10"
}, {
  "value": "480794",
  "date": "2020-07-11"
}, {
  "value": "480995",
  "date": "2020-07-12"
}, {
  "value": "481161",
  "date": "2020-07-13"
}, {
  "value": "481161",
  "date": "2020-07-14"
}, {
  "value": "481934",
  "date": "2020-07-15"
}, {
  "value": "482218",
  "date": "2020-07-16"
}, {
  "value": "482218",
  "date": "2020-07-17"
}, {
  "value": "482218",
  "date": "2020-07-18"
}, {
  "value": "482851",
  "date": "2020-07-19"
}, {
  "value": "483331",
  "date": "2020-07-20"
}, {
  "value": "484302",
  "date": "2020-07-21"
}, {
  "value": "484569",
  "date": "2020-07-22"
}, {
  "value": "484734",
  "date": "2020-07-23"
}, {
  "value": "484734",
  "date": "2020-07-24"
}, {
  "value": "484734",
  "date": "2020-07-25"
}, {
  "value": "485123",
  "date": "2020-07-26"
}, {
  "value": "485597",
  "date": "2020-07-27"
}, {
  "value": "486763",
  "date": "2020-07-28"
}, {
  "value": "487392",
  "date": "2020-07-29"
}, {
  "value": "487392",
  "date": "2020-07-30"
}, {
  "value": "487392",
  "date": "2020-07-31"
}, {
  "value": "487392",
  "date": "2020-08-01"
}, {
  "value": "487392",
  "date": "2020-08-02"
}, {
  "value": "487909",
  "date": "2020-08-03"
}, {
  "value": "488496",
  "date": "2020-08-04"
}, {
  "value": "488496",
  "date": "2020-08-05"
}, {
  "value": "490538",
  "date": "2020-08-06"
}, {
  "value": "490538",
  "date": "2020-08-07"
}, {
  "value": "490538",
  "date": "2020-08-08"
}, {
  "value": "491490",
  "date": "2020-08-09"
}, {
  "value": "492511",
  "date": "2020-08-10"
}, {
  "value": "494185",
  "date": "2020-08-11"
}, {
  "value": "494730",
  "date": "2020-08-12"
}, {
  "value": "495052",
  "date": "2020-08-14"
}, {
  "value": "495052",
  "date": "2020-08-15"
}, {
  "value": "495610",
  "date": "2020-08-16"
}, {
  "value": "496394",
  "date": "2020-08-17"
}, {
  "value": "496394",
  "date": "2020-08-18"
}, {
  "value": "498006",
  "date": "2020-08-19"
}, {
  "value": "498631",
  "date": "2020-08-20"
}, {
  "value": "498631",
  "date": "2020-08-21"
}, {
  "value": "498631",
  "date": "2020-08-22"
}, {
  "value": "499186",
  "date": "2020-08-23"
}, {
  "value": "499561",
  "date": "2020-08-24"
}, {
  "value": "500491",
  "date": "2020-08-25"
}, {
  "value": "500491",
  "date": "2020-08-26"
}, {
  "value": "501295",
  "date": "2020-08-27"
}, {
  "value": "501295",
  "date": "2020-08-28"
}, {
  "value": "501295",
  "date": "2020-08-29"
}, {
  "value": "501748",
  "date": "2020-08-30"
}, {
  "value": "502284",
  "date": "2020-08-31"
}, {
  "value": "503353",
  "date": "2020-09-01"
}, {
  "value": "503719",
  "date": "2020-09-02"
}, {
  "value": "504046",
  "date": "2020-09-03"
}, {
  "value": "504046",
  "date": "2020-09-04"
}, {
  "value": "504046",
  "date": "2020-09-05"
}, {
  "value": "504204",
  "date": "2020-09-06"
}, {
  "value": "504697",
  "date": "2020-09-07"
}, {
  "value": "505659",
  "date": "2020-09-08"
}, {
  "value": "506346",
  "date": "2020-09-12"
}, {
  "value": "507109",
  "date": "2020-09-14"
}, {
  "value": "508650",
  "date": "2020-09-16"
}, {
  "value": "509708",
  "date": "2020-09-17"
}, {
  "value": "509708",
  "date": "2020-09-18"
}, {
  "value": "509708",
  "date": "2020-09-19"
}, {
  "value": "510154",
  "date": "2020-09-20"
}, {
  "value": "510226",
  "date": "2020-09-21"
}, {
  "value": "511136",
  "date": "2020-09-22"
}, {
  "value": "511252",
  "date": "2020-09-23"
}, {
  "value": "511253",
  "date": "2020-09-24"
}, {
  "value": "511253",
  "date": "2020-09-25"
}, {
  "value": "511253",
  "date": "2020-09-26"
}, {
  "value": "511363",
  "date": "2020-09-27"
}, {
  "value": "511467",
  "date": "2020-09-28"
}, {
  "value": "511467",
  "date": "2020-09-29"
}, {
  "value": "512016",
  "date": "2020-09-30"
}, {
  "value": "512016",
  "date": "2020-10-01"
}, {
  "value": "512016",
  "date": "2020-10-02"
}, {
  "value": "512016",
  "date": "2020-10-03"
}, {
  "value": "512610",
  "date": "2020-10-04"
}, {
  "value": "512889",
  "date": "2020-10-05"
}, {
  "value": "513552",
  "date": "2020-10-06"
}, {
  "value": "513836",
  "date": "2020-10-07"
}];

parseDate = d3.timeParse("%Y-%m-%d");

line = d3.line()
  .defined(d => !isNaN(d.value))
  .x(d => x(parseDate(d.date)))
  .y(d => y(parseInt(d.value)));

margin = ({
  top: 20,
  right: 30,
  bottom: 30,
  left: 40
});
height = 500;
width = 500;

x = d3.scaleUtc()
  .domain(d3.extent(data, d => parseDate(d.date)))
  .range([margin.left, width - margin.right]);

y = d3.scaleLinear()
  .domain([0, d3.max(data, d => parseInt(d.value))]).nice()
  .range([height - margin.bottom, margin.top]);

xAxis = g => g
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));

yAxis = g => g
  .attr("transform", `translate(${margin.left},0)`)
  .call(d3.axisLeft(y));

svg = d3.select("body").append("svg")
  //.attr("viewBox", [0, 0, width, height]);
  .attr("width", "100%")
  .attr("height", "100%");

svg.append("g")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

svg.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("d", line);  
 <script src="https://d3js.org/d3.v6.min.js"></script>

Комментарии:

1. Ваше поле недостаточно велико, чтобы вместить все цифры для тиков оси — попробуйте использовать левое поле 60, и вы должны увидеть правильные тики. Для справки, в вашем вопросе первоначально было отмечено, что это проблема масштаба, с точки зрения поиска проблемы, то, что линия нарисована так, как ожидалось, должно указывать на успешное использование масштаба. В браузере вы можете проверить элементы в SVG, чтобы увидеть, соответствует ли текстовое значение тиков, если они не соответствуют тому, что вы видите, скорее всего, у вас проблема с размещением.

2. Большое вам спасибо! Я не заметил, что это была проблема с запасом.