D3: масштабировать данные по оси x каждые 7 лет

У меня есть проект d3, в который я хочу включить все свои даты, но только через определенные промежутки времени. Прямо сейчас он отображает все, что слишком загромождено. Я хочу отображать метки по оси x только каждые 7 лет. так, например, 1947, 1954, 1961, 1968 и т. д. Пожалуйста, помогите и заранее спасибо.

Вот мой код:

loadData = ()=> {
  req = new XMLHttpRequest();
  req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json" , true);
  req.send();
  req.onload= ()=>{
      json = JSON.parse(req.responseText);
      //dynmaic height
    /*var margin = {top: 20, right: 200, bottom: 0, left: 20},
        width = 300,
        height = datajson.length * 20 + margin.top + margin.bottom;*/
      //create measurements
      const margin = 60
      const width = 1000 - margin;
      const height = 600 - margin;
      const maxYScale = d3.max(json.data, (d) => d[1]);

      //date formatter
      const formatDate = d3.timeParse("%Y-%m-%d"); //convert from string to date format
      const parseDate = d3.timeFormat("%Y"); //format date to cstring


      //create svg
      const svg = d3.select("svg");
      const chart = svg.append("g")
        .attr("transform", `translate(${margin}, ${margin})`);


      //y-axis: split charts into 2 equal parts using scaling function
      const yScale = d3.scaleLinear()
        .range([height, 0]) //length
        .domain([0, maxYScale]); //content

      //create x-axis
      const yAxis = d3.axisLeft(yScale);

      //append y-axis
      chart.append("g")
        .call(yAxis);



       //create x-scale
      const xScale = d3.scaleBand()
        .range([0, width]) //length
        //.domain(json.data.filter((date, key) => { return (key % 20 === 0)}).map((d)=> parseDate(formatDate(d[0])))) 
        .domain(json.data.map((d)=> parseDate(formatDate(d[0])))) 
        .padding(0.2);

      //create x-axis
      const xAxis = d3.axisBottom(xScale);

      //append x-axis
      chart.append("g")
        .attr(`transform`, `translate(0, ${height})`)
        .call(xAxis);

      //make bars
      chart.selectAll("rect")
        .data(json.data)
        .enter()
        .append("rect")
        .attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
        .attr("y", (d) => yScale(d[1]))
        .attr("height", (d) => height - yScale(d[1]))
        .attr("width", xScale.bandwidth())



   } 
}

loadData();

Вот мой код: кодовая ручка

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я просто собираюсь ответить на свой вопрос, поскольку я нашел решение. Чтобы установить интервалы по оси x, я просто использовал тиковые значения. Затем я использовал свою шкалу и функцию фильтра для фильтрации интервалов на основе имеющихся у меня данных. Ниже вы можете найти ответ.

const xAxis = d3.axisBottom(xScale)
        .tickValues(xScale.domain().filter(function(d) { return (d % 7 === 0)}));

Другие вопросы по теме