看一下Cubism.js数据放入，和js差不多

Z时代
2024-01-10
分类：IT

一下代码出现的效果图为：图片描述


<div id="example1"></div>
 function random(name) {
    var  value = 0, //存放每一秒的数据
    totalList = [],
    i = 0,
    last;
return context.metric(function(start, stop, step, callback) {
 start = +start, stop = +stop;
 if (isNaN(last)) last = start;
 while (last < stop) {
   last += step;
   value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2)));;
   totalList.push(value);
 }
 callback(null, totalList);
},name);}

// 构建新的Cubism

var context = cubism.context()
    .serverDelay(300 * 1000)
    .clientDelay(0)
    .step(1e3)   // 时间频率
    .size(1050); // 框的长度
var foo = random(""); //名字以及数据（随机的这里）
d3.select("#example1").call(
    function(div) {
       div.append("div")
       .attr("class", "axis")
       .call(context.axis()
       .orient("top"));
       div.selectAll(".horizon")
      .data([foo]) //条数
      .enter().append("div")
      .attr("class", "horizon")
      .call(context.horizon().extent([60,60]));
});