Pubnub和Cubism.js

Question

我正在使用巴布来驱动我正在开发的仪表板。我所有的小部件都基于这样的代码：

Polymer({
    is: 'widget-horizon',
    properties: { ... },
    ready: function() {
        registerCallback(this.channel, function (data) {

        }); 
    }
});

然后，当pubnub通道接收到消息时，调用回调并传递数据。对于这个特定的图表，数据如下所示：

{
    "id": "RegResponseTimes",
    "type": null,
    "timestamp": "2016-10-14T11:12:13.2313043-05:00",
    "data": [
        {
            "label": "Metric1",
            "Value": 0.05
        },
        {
            "label": "Metric2",
            "Value": 0.17
        }
    ]
}

现在我正在尝试开发一个基于cubism.js的小部件，但是所有的文档都是针对拉动数据的，更具体地说是使用Cube或Graphite。

我很难将立体主义代码集成到我的回调中。我对所有的语言都犹豫不决，比如“米制访问者”和“范围”。

经过多次尝试和错误之后，我得到了一个值，但下面是我需要解决的问题：

1. 没有真正的图表，只有价值。
2. 我需要每个数据集的一个视界。

以下是当前的样子：

​

​

下面是我的完整代码(这是一个聚合物组件)。“随机”样本的主要变化包括：

1. 停止并启动上下文。我不知道如何避免它在我没有得到数据的情况下滴答作响。
2. 而不是推送一个随机数，而是将其中一个值推送为POC。

 </style>     <strong id="widgetName">{{name}}</strong>     <div id="chart1"></div> </template> <script>      var data = [];      Polymer({         is: 'widget-horizon',         properties: {             dataid: {                 type: String             },             name: {                 type: String             },             gethistory: {                 type: Number             },             testvalue: {                 type: Number             },             isloading: {                 type: Boolean,                 value: true             }         },         ready: function() {             var self = this;             subscribe(self.dataid);             getHistory(self.dataid,self.gethistory);             registerCallback(this.dataid, function (data) {                 context.start();                 var y = data.data[0];                 self.testvalue = y.Value;                 self.isloading = false;             });              var context = cubism.context()                     .serverDelay(0)                     .clientDelay(0)                     .step(1e4)                     .size(600);             var foo = setval("foo");              var chart = self.$$('#chart1');             d3.select(chart).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([0, 120]));                 div.append("div")                         .attr("class", "rule")                         .call(context.rule());              });               function setval(name) {                 var value = 0,                         values = [],                         last;                 return context.metric(function(start, stop, step, callback) {                     start = +start, stop = +stop;                     if (isNaN(last)) last = start;                     while (last < stop) {                         last += step;                         value = self.testvalue;                         if (value != "") {                             values.push(self.testvalue);                             context.stop();                         }                     }                     callback(null, values = values.slice((start - stop) / step));                 }, name);             }              context.on("focus", function(i) {                 d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");             });         }     }); </script>

Answer 1

我让它起作用了。这是我的全部回访：

registerCallback(this.dataid, function (data) {
    if (self.isloading) {
        for (var i = 0; i < data.data.length; i++){
            datas[i] = setval(data.data[i].MessageBodyClassName);
        }

        d3.select(chart).call(function(div) {
            div.append("div")
                    .attr("class", "axis")
                    .call(context.axis().orient("top"));
            div.selectAll(".horizon")
                    .data(datas)
                    .enter().append("div")
                    .attr("class", "horizon")
                    .call(context.horizon().extent([0, 120]));
            div.append("div")
                    .attr("class", "rule")
                    .call(context.rule());

        });
    } else {
        for (var i = 0; i < data.data.length; i++){
            vals[data.data[i].MessageBodyClassName] = data.data[i].Value;
        }
    }
    context.start();
    self.isloading = false;
});

下面是转换后的random函数：

function setval(name) {
    var value = 0,
            values = [],
            last;
    return context.metric(function(start, stop, step, callback) {
        start = +start, stop = +stop;
        if (isNaN(last)) last = start;
        while (last < stop) {
            last += step;
            value = self.testvalue;
            if (value != "") {
                values.push(vals[name]);
                context.stop();
            }
        }
        callback(null, values = values.slice((start - stop) / step));
    }, name);
}

实际上，我刚刚定义了一个全局vals数组，当pubnub更新并使用度量访问器更新值时，我使用它来存储新值.我想是的。