d3 js中的時間x軸

Question

在這里，x軸是時間軸，在下面的代碼中，我看到x軸在右側略有偏移。 知道為什么會發生嗎？ 我們該如何解決？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
</style>
<script>
$(document).ready(function(){
    var pad = 100;
    var width = 700;
    var height = 400;

    var dateString=["2014-02-17","2014-02-18","2014-02-19","2014-02-20","2014-02-21"];
    var value=[0,1000,2000,3000,4000];
    var y_extent = d3.extent(value,function(v){return v});
    var x_extent = d3.extent(dateString,function(ds){return new Date(ds)}); 
    console.log(x_extent,y_extent);

    var xScale = d3.time.scale()
            .domain(x_extent)
            .rangeRound([pad,width-(2*pad)]);

        var yScale = d3.scale.linear()
            .domain(y_extent)
            .range([height-pad,0]);

       var svg =d3.select(".draw")
            .append("svg")
            .attr("width",width)
            .attr("height",height);

    var x_axis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.days,1).tickFormat(d3.time.format("%d %b"));

        var y_axis = d3.svg.axis().scale(yScale).orient('left');
        svg.append("g")
            .attr("class","x axis")
            .attr("transform","translate(0,"+(height-pad)+")")
            .call(x_axis);

        svg.append("g")
            .attr("class","y axis")
            .attr("transform","translate("+pad+",0)")
            .call(y_axis);

    for(var i=0;i<value.length;i++) {
    svg.append("circle")
            .attr("r", 5)
            .attr("cx", xScale(new Date(dateString[i])))
            .attr("cy",yScale(0))
            .style("fill", "red");  
    }

});
</script>
</head>
<body>
    <div class="draw">
    </div>
</body>
</html>

這是解決問題的一個例子。

Answer 1

發生的事情是Date對象正在獲取日期並根據您的本地時間對其進行調整。 這實際上是造成偏移的原因，因為實際日期會略有不同。 一種簡單的解決方法是使用interval.utc ，因此它將采用UTC的時間間隔而不是本地時間。 因此對於var x_axis而不是：

.ticks(d3.time.days,1)

替換為：

.ticks(d3.time.days.utc,1)

小提琴的例子

d3 js中的時間x軸

問題描述

1 個解決方案

解決方案1
0 2015-09-21 17:27:24

d3 js中的時間x軸

問題描述

1 個解決方案

解決方案1 0 2015-09-21 17:27:24

解決方案1
0 2015-09-21 17:27:24