如何使用D3.js繪製日期圖形

大家好，我正在嘗試在d3.js中添加日期我該如何實現這一點我是新的d3.js，當我嘗試在X中添加整數而不是日期時，軸這是工作好.. 如何申報日期，併爲其指定我在這裏通過由於連接的JS和HTML文件提前:)如何使用D3.js繪製日期圖形

InitChart(); 

function InitChart() { 

/*var lineData = [{ 
'x': 1, 
'y': 5 
    }, { 
'x': 20, 
'y': 20 
}, { 
'x': 40, 
'y': 10 
    }, { 
'x': 60, 
'y': 40 
    }, { 
    'x': 80, 
    'y': 5 
}, { 
    'x': 100, 
'y': 60 
}];*/ 
var lineData=[{"y": 0.8076999999999999, "x": "2016-01-08 03:01:19.418110"}, {"y": 0.692666666666667, "x": "2016-01-08 05:10:19.838509"}, {"y": 0.5674333333333333, "x": "2016-01-08 09:54:13.022163"}] 

var vis = d3.select("#visualisation"), 
WIDTH = 1000, 
HEIGHT = 500, 
MARGINS = { 
    top: 20, 
    right: 20, 
    bottom: 20, 
    left: 50 
}, 
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function (d) { 
    return d.x; 
    }), 
    d3.max(lineData, function (d) { 
    return d.x; 
    }) 
    ]), 

    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top,   MARGINS.bottom]).domain([d3.min(lineData, function (d) { 
    return d.y; 
    }), 
    d3.max(lineData, function (d) { 
    return d.y; 
    }) 
]), 

xAxis = d3.svg.axis() 
    .scale(xRange) 
    .tickSize(5) 
    .tickSubdivide(true), 

yAxis = d3.svg.axis() 
    .scale(yRange) 
    .tickSize(5) 
    .orient("left") 
    .tickSubdivide(true); 


vis.append("svg:g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
.call(xAxis); 

vis.append("svg:g") 
.attr("class", "y axis") 
.attr("transform", "translate(" + (MARGINS.left) + ",0)") 
.call(yAxis); 

var lineFunc = d3.svg.line() 
.x(function (d) { 
    return xRange(d.x); 
}) 
.y(function (d) { 
return yRange(d.y); 
}) 
.interpolate('linear'); 

vis.append("svg:path") 
.attr("d", lineFunc(lineData)) 
.attr("stroke", "blue") 
.attr("stroke-width", 2) 
.attr("fill", "none"); 

    }

這裏是HTML

enter code here 
<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title> D3 trial </title> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body> 
    <svg id="visualisation" width="400" height="500"></svg> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>  </script> 
    <script src='http://d3js.org/d3.v3.min.js'></script> 

    <script src="js/index.js"></script> 
    </body> 
    </html>

來源

2016-01-10 user3398900

看看here，這個例子使用TypeScripit，但是概念是一樣的。您基本上需要使用d3.time.scale()而不是d3.scale.linear()。你還需要解析你的日期。更新XRANGE應該是這樣的：

xRange = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(lineData, function (d) { return new Date(d.x); }))

我用的d3.min和d3.max，它具有相同的效果，而不是但短符號的extent功能。

來源

2016-01-10 11:06:35

我們還可以在我的數據集中使用秒嗎？ @Hugues？ – user3398900

當然。看看[時間格式化]（https://github.com/mbostock/d3/wiki/Time-Formatting）的可能性，以及如何使用它來[格式化ticks]（https://github.com/ mbostock/d3/wiki/Time-Scales＃tickFormat） –

Yea Hugues我會嘗試，並會盡快告訴你，我儘量謝謝:) – user3398900

如何使用D3.js繪製日期圖形

回答

相關問題