使用JSON數據源簡單cubism.js

Question

我正在尋找一種方式，使用cubism.js 這裏JSON數據源是我的代碼：

<script> 
var context = cubism.context() 
    .serverDelay(0) 
    .clientDelay(0) 
    .step(1e3) 
    .size(960); 


var dataset = [ [-1, -3], [2, 4], [3, -4], [-3, 1]]; 
//var foo = random("foo"); 
var foo = context.metric(function(start, stop, step, callback) { 
    d3.json(dataset, function(data) { 
    if (!data) return callback(new Error("unable to load data")); 
    callback(null, data); 
    }); 
}); 
var bar = random("bar"); 

d3.select("#kpi2").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([-20, 20])); 

    div.append("div") 
     .attr("class", "rule") 
     .call(context.rule()); 

}); 

context.on("focus", function(i) { 
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px"); 
}); 

</script> 

我聽說過使用context.metric但我不知道如何使用，因爲這是一個新手。 感謝

Answer 1

function stock(name) { 
    return context.metric(function(start, stop, step, callback) { 
     d3.json("/data" + name + ".json", function(rows) { 
      var compare = rows[0][1], value = rows[0][1], values = [value]; 

      // Creates an array of the price differences throughout the day 
      rows.forEach(function(d) { 
       values.push(value = (d[1] - compare)/compare); 
      }); 
     callback(null, values); }); 
    }, name); 
} 

你可以看看這個例子瞭解更多詳情：http://www.kshitijaranke.com/author/

或

Can we use custom JSON Data on Cubism?

它應該給你一個良好的開端就如何做到這一點。