d3.js - 带有 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/

或者

我们可以在立体主义上使用自定义 JSON 数据吗？

它应该让你在如何做到这一点上有一个良好的开端。