轴上重复的日期刻度答案

【问题标题】：Duplicate date ticks on axis轴上重复的日期刻度
【发布时间】：2020-12-10 09:35:29
【问题描述】：

我正在尝试在我的图表上显示一些日期/值对，但 x 轴上有重复值：

这是渲染刻度的代码：

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

完整代码sn-p：

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>

【问题讨论】：

标签： javascript d3.js

【解决方案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>

【讨论】：