使用json数据源的简单cubism.js

时间:2013-03-26 09:36:00

标签: d3.js cubism.js

我正在寻找一种在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,但我不知道如何使用,因为我是这个领域的新手。 感谢

1 个答案:

答案 0 :(得分:-2)

    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?

它应该让你在如何做到这一点上先行一步。