[英]Real time charts with D3.js
我對D3.js完全陌生。 我正在嘗試創建一個簡單的迷你圖,其X軸為時間,Y軸為1000。 我有一個Web套接字服務器,它將隨機數推送到1000。 我想在Y軸上繪制帶有這些值的圖形,在X軸上繪制時間(以24小時格式)。 我嘗試了一些方法,但是都無法正常工作。 我的圖變成垂直的,僅在某些時候顯示。
感謝任何幫助使此工作正常進行。
以下是代碼中的內容,它是我在網上找到的示例的調整版本。
data []是從Web套接字調用中填充的。
var margin = {top: 20, right: 20, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, data[data.length -1]])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var line = d3.svg.line()
.x(function(d, i) {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
return dt.getSeconds();
})
.y(function(d, i) { console.log("D is " + d+ "Y is " + y(d));return y(d); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y(0) + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0," + x(0)+")")
.call(d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
redraw();
function redraw() {
path
.attr("d", line)
.attr("transform", null)
.transition()
.duration(500)
.ease("linear")
.attr("transform", "translate(" + x(-1) + ",0)")
.each("end", tick);
data.shift();
}
有人可以指出我D3的初學者教程,這將幫助我開始創建不同類型的圖嗎?
了解您正在使用的數據結構可能會有所幫助。
如果您想使用Angular + D3js,那么這里有一些庫可以幫助您快速完成工作。
一個簡單的庫是: http : //angularjs-nvd3-directives.github.io/angularjs-nvd3-directives/
使用D3.js的另一套好的指令是http://krispo.github.io/angular-nvd3/#/主頁上有很多示例可供您檢查。 盡管缺少文檔,但是每個示例都有一個小工具,您可以檢查其工作方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.