Блог

Главная - Вопросы по программированию - Повторяющиеся отметки даты на оси

Повторяющиеся отметки даты на оси

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я пытаюсь отобразить некоторые пары дата / значение на моем графике, но на оси x есть повторяющиеся значения:

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

Это код для рендеринга тиков:

 chart
    .select(".x-axis")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(xScale).ticks(data.length).tickFormat(d3.timeFormat("%y-%m")));

Полный фрагмент кода:

 var data = [{
        date: "2020-01-01",
        popularity: 50
    },
    {
        date: "2020-02-01",
        popularity: 150
    },
    {
        date: "2020-03-01",
        popularity: 200
    },
    {
        date: "2020-04-01",
        popularity: 250
    },
    {
        date: "2020-05-01",
        popularity: 200
    },
    {
        date: "2020-06-01",
        popularity: 250
    },
    {
        date: "2020-07-01",
        popularity: 350
    }
];

// Create SVG and padding for the chart
const svg = d3
    .select("#chart")
    .append("svg")
    .attr("height", 400)
    .attr("width", 600);
    
const margin = {
    top: 50,
    bottom: 50,
    left: 50,
    right: 50
};

const chart = svg.append("g").attr("transform", `translate(${margin.left},0)`);
const width =  svg.attr("width") - margin.left - margin.right;
const height =  svg.attr("height") - margin.top - margin.bottom;
const grp = chart
    .append("g")
    .attr("transform", `translate(-${margin.left},-${margin.top})`);

// Add empty scales group for the scales to be attatched to on update 
chart.append("g").attr("class", "x-axis");
chart.append("g").attr("class", "y-axis");


function updateScales(data) {
    // Create scales
    const yScale = d3
        .scaleLinear()
        .range([height, 0])
        .domain([0, d3.max(data, dataPoint => dataPoint.popularity)]);

    // Set Date Range
    var earliestDate = new Date(data[0].date);
    var lastDate = new Date(data[data.length - 1].date);

    // Setting up date on the X axis
    const xScale = d3
        .scaleLinear()
        .range([0, width])
        .domain([earliestDate, lastDate]);

    return {
        yScale,
        xScale
    };
}

function updateAxes(data, chart, xScale, yScale) {
    chart
        .select(".x-axis")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(xScale).ticks(data.length).tickFormat(d3.timeFormat("%y-%m")));

    chart
        .select(".y-axis")
        .attr("transform", `translate(0, 0)`)
        .call(d3.axisLeft(yScale));
}


function updateChart(data) {
    const {
        yScale,
        xScale
    } = updateScales(data);
    updateAxes(data, chart, xScale, yScale);
}

updateChart(data); 
 #chart {
    text-align: center;
    margin-top: 40px;
  } 
 <!DOCTYPE html>
<head>
  <meta charset="utf-8">
</head>

<body>
<button>Update Chart</button>
<div id="chart"></div>
</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.js" integrity="sha512-CQk1Bd5qczb5n31LOjQ8nmasspRasRP95SzVXcjM2Crm 3pmP/evOvFqrHeR26IA6pkgraiKom0aGWF29d8xqQ==" crossorigin="anonymous"></script>

Ответ №1:

использование .scaleTime() со списком дат

  var extent = d3.extent(data.map(_d=>new Date(_d.date)));

 const xScale = d3.scaleTime().range([0, width])
            .domain(extent);

 
 var data = [{
        date: "2020-01-01",
        popularity: 50
    },
    {
        date: "2020-02-01",
        popularity: 150
    },
    {
        date: "2020-03-01",
        popularity: 200
    },
    {
        date: "2020-04-01",
        popularity: 250
    },
    {
        date: "2020-05-01",
        popularity: 200
    },
    {
        date: "2020-06-01",
        popularity: 250
    },
    {
        date: "2020-07-01",
        popularity: 350
    }
];

// Create SVG and padding for the chart
const svg = d3
    .select("#chart")
    .append("svg")
    .attr("height", 400)
    .attr("width", 600);
    
const margin = {
    top: 50,
    bottom: 50,
    left: 50,
    right: 50
};

const chart = svg.append("g").attr("transform", `translate(${margin.left},0)`);
const width =  svg.attr("width") - margin.left - margin.right;
const height =  svg.attr("height") - margin.top - margin.bottom;
const grp = chart
    .append("g")
    .attr("transform", `translate(-${margin.left},-${margin.top})`);

// Add empty scales group for the scales to be attatched to on update 
chart.append("g").attr("class", "x-axis");
chart.append("g").attr("class", "y-axis");


function updateScales(data) {
    // Create scales
    const yScale = d3
        .scaleLinear()
        .range([height, 0])
        .domain([0, d3.max(data, dataPoint => dataPoint.popularity)]);

    var extent = d3.extent(data.map(_d=>new Date(_d.date)));
    // Setting up date on the X axis
    const xScale = d3
        .scaleTime()
        .range([0, width])
        .domain(extent);

    return {
        yScale,
        xScale
    };
}

function updateAxes(data, chart, xScale, yScale) {
    chart
        .select(".x-axis")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(xScale).ticks(data.length).tickFormat(d3.timeFormat("%y-%m")));

    chart
        .select(".y-axis")
        .attr("transform", `translate(0, 0)`)
        .call(d3.axisLeft(yScale));
}


function updateChart(data) {
    const {
        yScale,
        xScale
    } = updateScales(data);
    updateAxes(data, chart, xScale, yScale);
}

updateChart(data); 
 #chart {
    text-align: center;
    margin-top: 40px;
  } 
 <!DOCTYPE html>
<head>
  <meta charset="utf-8">
</head>

<body>
<button>Update Chart</button>
<div id="chart"></div>
</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.js" integrity="sha512-CQk1Bd5qczb5n31LOjQ8nmasspRasRP95SzVXcjM2Crm 3pmP/evOvFqrHeR26IA6pkgraiKom0aGWF29d8xqQ==" crossorigin="anonymous"></script>