时间戳

首页 > 解决方案 > d3.js v3 时间刻度：如何将标签中的默认小时更改为特定小时

d3.js - d3.js v3 时间刻度：如何将标签中的默认小时更改为特定小时

问题描述

如何更改标签中显示的小时数。我想成为像5 PM, 22 Aug而不是12 AM, 22 Aug。
我的数据中的小时08/22/2019 5:14:34 PM。

.axis text {
        font: 10px sans-serif;
    }

    .axis line,
    .axis path {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var customTimeFormat = d3.time.format("%I %p, %d %b");
        var dateFormat = "%m/%d/%Y %H:%M:%S %p";
        var parseDate = d3.time.format(dateFormat).parse
        var margin = {
            top: 0,
            right: 40,
            bottom: 20,
            left: 40
        },
          width = 1200 - margin.left - margin.right,
          height = 20 - margin.top - margin.bottom;

        var x = d3.time.scale()
          .domain([parseDate("08/21/2019 5:14:34 PM"), parseDate("09/5/2019 5:14:34 PM")])
          .range([0, width]);

        var xAxis = d3.svg.axis()
          .scale(x)
          .tickFormat(customTimeFormat)
          .ticks(d3.time.day, 1)

        var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
    </script>
</body

标签： d3.js

解决方案

它使用tickValues 工作。代码中包含的注释：

在此处输入图像描述 

<style>
.axis text {
        font: 10px sans-serif;
    }

    .axis line,
    .axis path {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
</style>
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var customTimeFormat = d3.time.format("%I %p, %d %b");
        var dateFormat = d3.time.format("%m/%d/%Y %H:%M:%S %p");

        // Use dateFormat to initialize startDate and endDate
        var startDate = dateFormat.parse("08/21/2019 5:14:34 PM");
        var endDate = dateFormat.parse("09/5/2019 5:14:34 PM");

        // Initialize daysArray for use in tickValues
        var daysArray = [];

        // For looping purpose
        var from = new Date("08/21/2019 5:14:34 PM");
        var to = new Date("09/5/2019 5:14:34 PM");

        // Push the first starting date into daysArray
        daysArray.push(from);
    
        // Push the rest of the days (including the endDate) to daysArray
        for (var day = from; day <= to; day.setDate(day.getDate() + 1)) {
          daysArray.push(new Date(day.setDate(day.getDate() + 1)));
        }

        //console.log(daysArray);

        var margin = {
            top: 0,
            right: 40,
            bottom: 20,
            left: 40
        },
          width = 1200 - margin.left - margin.right,
          height = 20 - margin.top - margin.bottom;

        var x = d3.time.scale()
          .domain([new Date(startDate), new Date(endDate)]) //Specify the domain with startDate and endDate
          .range([0, width]);

        var xAxis = d3.svg.axis()
          .scale(x)    
          .tickValues(daysArray) // Use tickValues instead, tried tickValues(d3.time.day.range(new Date(startDate),new Date(endDate))) with no luck
          .tickFormat(customTimeFormat)
          .ticks(d3.time.days, 1)

        var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
          
    </script>
</body>

推荐阅读