Question

我有一段时间从d3和立体主义API页面上找到的任何代码转变为改变我需要他们做的事情......

我正在尝试按照https://github.com/square/cubism/wiki/Horizon中列出的Horizon图的步骤进行操作，但我没有Cube或Graphite数据源。

所以我试图在这里从mbostock的答案中制作一个最小的示例度量标准 Using Other Data Sources for cubism.js 和/或这里的随机值返回度量示例 https://github.com/square/cubism/wiki/Context

我想在Context API页面上，它解释了context.metric（）的参数，我不理解“...以及结果何时可用的回调函数”部分。我的服务器上有以下内容，当我在浏览器中查看/刷新时，我的浏览器控制台中出现“TypeError：callback is not function”：

            <body> 
                <div class="mag"></div>

                <script type="text/javascript">

var myContext = cubism.context();

var myHoriz = myContext.horizon()
        .metric(function(start, stop, step, callback) {
                var values = [];
                start = +start;
                stop = +stop;
                while (start < stop) {
                        start += step;
                        values.push(Math.random());
                }
                callback(null, values);
        });

d3.select(".mag").selectAll("p")
        .data([1, 2, 3, 7])             // the "times" for which I want to graph the data
        .enter().append("p")
        .call(myHoriz);

                </script>
        </body>

哦（编辑），我应该补充一下，代码确实运行，因为我得到一个文档，在div中添加了四个段落，每个段落的文本内容是数字1,2,3,7。所以我想至少select（），data（），enter（）和append（）位正在工作。

Answer 1

好吧斯科特卡梅隆的观点让我超越了障碍。我将在这里“回答”以及为将来的读者提供的工作代码。仍然不是我想要的一个例子，但是消除了错误，我会要求在一个新问题中进行跟进，以使其更小。

            <body> 
                <div class="mag"></div>

                <script type="text/javascript">

var myContext = cubism.context();

var myMetr = myContext.metric(function(start, stop, step, callback) {
        var values = [];
        start = +start; 
        stop = +stop;
        while (start < stop) { 
                start += step;
                values.push(Math.random());
        }       
        callback(null, values);
});     

var myHoriz = myContext.horizon()
        .metric(myMetr);

d3.select(".mag").selectAll("p")
        .data([1, 2, 3, 7])
        .enter().append("p")
        .call(myHoriz);

                </script>
        </body>

Answer 2

您似乎对horizon.metric context.metric感到困惑。它是context.metric，它具有您定义的签名的功能。

minimal cubism.js水平图示例（TypeError：回调不是函数）

2 个答案: