我对D3.js完全陌生。我试图在X轴上创建一个简单的sparkline,并在Y轴上创建1000个数字。我有一个Web套接字服务器,它将随机数字推送到客户端。我想用Y轴上的这些值和X轴上的时间(24小时格式)绘制一张图表。我尝试了一些东西,但没有一个能正常工作。我的图形变成垂直,有时只显示。使用D3.js的实时图表
感谢任何帮助,让这项工作。
下面是我的代码,这是我在网上找到的一个例子的调整版本。
数据[]从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,这将有助于我开始创建不同类型的图表?
这本书是使用d3开始的好书。您可以免费阅读在线版本:http://chimera.labs.oreilly.com/books/1230000000345 –
谢谢您的链接! – ConfusionPrevails