如何使用 moment.js 初始化 d3.scale.utc()答案

【问题标题】：How to initialize d3.scale.utc() using moment.js如何使用 moment.js 初始化 d3.scale.utc()
【发布时间】：2016-04-28 16:07:27
【问题描述】：

我的服务器端模型以 UTC 格式保存日期/时间。在我的前端，我使用 moment.js 来使用服务器端数据创建时间对象。

但是，我正在使用 d3 绘制数据，我不太确定如何使用我的 moment 对象初始化 d3.scale.utc()。我需要以 UTC 时间渲染轴刻度。

以前，d3.scale.utc().domain(starDate, endDate) 在 startDate 和 endDate 是原生 JavaScript 日期对象的情况下工作。

但是现在我已经重构了代码以使用 moment.js 来处理 UTC 时间并简化了一些日期和时间操作函数，我正面临这个绘图问题。

【问题讨论】：

标签： d3.js momentjs utc

【解决方案1】：

你有一个时刻对象，你想把它提供给d3？最简单的方法是使用通过valueOf() 获得的 JavaScript 纪元时间：

var startDate = moment().subtract(10, 'hours').utc();
var endDate = moment().add(10, 'hours').utc();

var x = d3.time.scale.utc()
  .domain([startDate.valueOf(), endDate.valueOf()])    
  .range([0, 400]);

var xAxis = d3.svg.axis()
    .scale(x);

var svg = d3.select("body").append("svg")
    .attr("width", 410)
    .attr("height", 210)
  .append("g")
    .attr("transform", "translate(" + 10 + "," + 10+ ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + 0 + ")")
    .call(xAxis)
  .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.js"></script>

【讨论】：