如何自定义Cubism.js插件来接受来自其他来源的数据，如二维数据阵列

Question

我是Javascript的新手。需要使用cubism.js绘制时间序列图，其中包含来自二维数据阵列的数据。 有没有人尝试过这个？ 任何人都可以帮我解决这个棘手的问题吗？

以下是我的代码evo-timetest.js（也可在Dropbox上找到）：

define( [ "jquery", "css!./style.css","./d3.v3.min", "./cubism.v1"],
    function (  $, d3,cubism) {     
        paint: function ( $element, layout ) {

                //Check data in console
                console.log($element);
                console.log(layout);

                // Data Array
                var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix;

                //Dimension Lables
                var DimensionLabels = layout.qHyperCube.qDimensionInfo.map(function (d) {
                    return d.qFallbackTitle;
                });
                var test = DimensionLabels.map(function(i){return i;})
                console.log(test);

                //Store each data into objects
                var data = qMatrix.map(function(d){
                    return{
                        "Dim1":d[0].qText,
                        "Metric1":d[1].qNum
                    }
                });
                var map = data.map(function(i){return i.Metric1;})
                console.log(map);
                // Store chart object width, height, and Id
                var width = $element.width();

                var height = $element.height();

                var id = "container_" + layout.qInfo.qId;

                if(document.getElementById(id)){
                    $('#' + id).empty();
                }
                else{
                    $element.append($('<div/>').attr("id",id).width(width).height(height));
                }

                // Call visualization function
                viz(data,DimensionLabels,width,height,id);

                }
    };

} );

var viz = function(data,lables,width,height,id){


/*    
    // create context and horizon
                var context = cubism.context().size(960)
                var horizon = context.horizon().extent([0,2])

                // define metric accessor
                function random_ma(name) {
                return context.metric(function(start,stop,step,callback){
                var values = [];
                while (+start < +stop){
                    start = +start +step; 

                    values = data.map(function(i){return i;})

                    console.log(values);

                }
            callback(null, values);
                }, name);
                }

            // draw graph
            var metrics = ["foo","bar","baz"];
            horizon.metric(random_ma);

            d3.select("#graph").selectAll(".horizon")
            .data(metrics)
            .enter()
            .append("div")
            .attr("class", "horizon")
            .call(horizon);

            // set rule
            d3.select("#"+id).append("div")
            .attr("class", "rule")
            .call(context.rule());



            // set focus
            context.on("focus", function(i) {
            d3.selectAll(".value")
            .style( "right", i == null ? null : context.size() - i + "px");
            });
            // set axis 
            var axis = context.axis()
            d3.select("#graph").append("div").attr("class", "axis").append("g").call(axis);


            } 
*/           

//Defenition of Visualization function


//***************************************************************************************************************************

/* console.log(data);
console.log(lables); */
/* //var dF = new Date(2013,12,31)
var context = cubism.context();
//      .serverDelay(Date.now() - dF)
        // .step(864e5)
        // .size(1280)
        // .stop();

d3.select("#" + id).selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });

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

var Data = lables.map(function(i){return i;})
// var primary = Data[1];
// var secondary = primary.shift(-864e5*30); 
// Data[2] = secondary;

d3.select("body").selectAll(".horizon")
    .data(Data)
  .enter().insert("div", ".bottom")
    .attr("class", "horizon")
  .call(context.horizon()
    .format(d3.format("+,.2p")));

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


/****************************************************************************************************************/



/* console.clear();


    // create new cubism.js context to render
    var graphContext = cubism.context();
  //      .serverDelay(1000) // allow 1second delay
  //      .step(1000) // 1 second steps
   //     .size(650); // 50px wide

    // create a new metric
    // this allows you to retrieve values from some source
    // this is data-source agnostic, so this does not matter.
    var graphMetric = graphContext.metric(function(start, stop, step, callback) {
        var values = [];
        start = +start;
        stop = +stop;
        while (start < stop) {
            start += step;
            values.push(Math.random());
        }
        callback(null, values);
    });


    // here we create a new element and then append it to our
    // parent container. Then we call d3 to select the newly created
    // div and then we can create a chart
    var graphElement = document.createElement("div");
    $("#insertElement").append(graphElement);    
    d3.select(graphElement).call(function(div) {
       div.selectAll(".horizon")
            .data([graphMetric])
            .enter().append("div")
            .attr("class", "horizon")
            .call(graphContext.horizon()
                  .height(150)
             ); 
       div.append("div")
            .attr("class", "axis bottom")
            .call(graphContext.axis().orient("top"));
        div.append("div")
            .attr("class", "rule")
            .call(graphContext.rule());
                */



  /**********************************************************************************************************/
/*   d3.select("#" + id).selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div");
  var chart = d3.timeseries()
              .addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"})
              .width(900);
chart('#chart');
   */


}