如何使用moment.js初始化d3.scale.utc（）

我的服務器端模型以UTC保存日期/時間。在我的前端，我使用moment.js來創建使用服務器端數據的時間對象。如何使用moment.js初始化d3.scale.utc（）

但是，我使用d3來繪製數據，我不太清楚如何使用我的時刻對象來初始化d3.scale.utc()。我需要以UTC時間渲染軸比例。

此前，d3.scale.utc().domain(starDate, endDate)正在工作，其中startDate和endDate是本機JavaScript日期對象。

但是，現在我已經重構了使用moment.js來處理UTC時間並簡化日期和時間操作函數的代碼，我正面臨着這種繪圖問題。

2016-01-22 Pixelord

你有一個時刻的對象，你想餵它到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>

來源

2016-01-22 21:22:56 Mark

如何使用moment.js初始化d3.scale.utc（）

回答

相關問題