轴上重复的日期刻度

Question

我试图在图表上显示一些日期/值配对，但 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

    };

}

Answer 1

.scaleTime()与日期列表一起使用&nbsp;var extent = d3.extent(data.map(_d=>new Date(_d.date)));&nbsp;const xScale = d3.scaleTime().range([0, width])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .domain(extent);var data = [{&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-01-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 50&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-02-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 150&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-03-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 200&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-04-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 250&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-05-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 200&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-06-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 250&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date: "2020-07-01",&nbsp; &nbsp; &nbsp; &nbsp; popularity: 350&nbsp; &nbsp; }];// Create SVG and padding for the chartconst svg = d3&nbsp; &nbsp; .select("#chart")&nbsp; &nbsp; .append("svg")&nbsp; &nbsp; .attr("height", 400)&nbsp; &nbsp; .attr("width", 600);&nbsp; &nbsp;&nbsp;const margin = {&nbsp; &nbsp; top: 50,&nbsp; &nbsp; bottom: 50,&nbsp; &nbsp; left: 50,&nbsp; &nbsp; 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&nbsp; &nbsp; .append("g")&nbsp; &nbsp; .attr("transform", `translate(-${margin.left},-${margin.top})`);// Add empty scales group for the scales to be attatched to on update&nbsp;chart.append("g").attr("class", "x-axis");chart.append("g").attr("class", "y-axis");function updateScales(data) {&nbsp; &nbsp; // Create scales&nbsp; &nbsp; const yScale = d3&nbsp; &nbsp; &nbsp; &nbsp; .scaleLinear()&nbsp; &nbsp; &nbsp; &nbsp; .range([height, 0])&nbsp; &nbsp; &nbsp; &nbsp; .domain([0, d3.max(data, dataPoint => dataPoint.popularity)]);&nbsp; &nbsp; var extent = d3.extent(data.map(_d=>new Date(_d.date)));&nbsp; &nbsp; // Setting up date on the X axis&nbsp; &nbsp; const xScale = d3&nbsp; &nbsp; &nbsp; &nbsp; .scaleTime()&nbsp; &nbsp; &nbsp; &nbsp; .range([0, width])&nbsp; &nbsp; &nbsp; &nbsp; .domain(extent);&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; yScale,&nbsp; &nbsp; &nbsp; &nbsp; xScale&nbsp; &nbsp; };}function updateAxes(data, chart, xScale, yScale) {&nbsp; &nbsp; chart&nbsp; &nbsp; &nbsp; &nbsp; .select(".x-axis")&nbsp; &nbsp; &nbsp; &nbsp; .attr("transform", `translate(0,${height})`)&nbsp; &nbsp; &nbsp; &nbsp; .call(d3.axisBottom(xScale).ticks(data.length).tickFormat(d3.timeFormat("%y-%m")));&nbsp; &nbsp; chart&nbsp; &nbsp; &nbsp; &nbsp; .select(".y-axis")&nbsp; &nbsp; &nbsp; &nbsp; .attr("transform", `translate(0, 0)`)&nbsp; &nbsp; &nbsp; &nbsp; .call(d3.axisLeft(yScale));}function updateChart(data) {&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; &nbsp; yScale,&nbsp; &nbsp; &nbsp; &nbsp; xScale&nbsp; &nbsp; } = updateScales(data);&nbsp; &nbsp; updateAxes(data, chart, xScale, yScale);}updateChart(data);#chart {&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin-top: 40px;&nbsp; }<!DOCTYPE html><head>&nbsp; <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>