d3 js中的时间x轴

Question

Here, x-axis is the time axis, with following code I see x-axis little bit displaced on right side. 在这里，x轴是时间轴，在下面的代码中，我看到x轴在右侧略有偏移。 Any idea why does it happen? 知道为什么会发生吗？ And how can we fix it? 我们该如何解决？

<!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>

Here is an example fiddle of the problem. 这是解决问题的一个例子。

Answer 1

What's happening is the Date object is taking the date and adjusting it based on your local time. 发生的事情是Date对象正在获取日期并根据您的本地时间对其进行调整。 This is actually what is causing the offset, since the real dates will slightly vary. 这实际上是造成偏移的原因，因为实际日期会略有不同。 An easy way to fix that is to use interval.utc , so it will take times intervals in UTC rather than local time. 一种简单的解决方法是使用interval.utc ，因此它将采用UTC的时间间隔而不是本地时间。 So for var x_axis rather than having: 因此对于var x_axis而不是：

.ticks(d3.time.days,1)

Replace it with: 替换为：

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

Fiddle Example 小提琴的例子

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