最小的 cubism.js 水平线图示例（TypeError：回调不是函数）答案

【问题标题】：minimal cubism.js horizon chart example (TypeError: callback is not a function)最小的 cubism.js 水平线图示例（TypeError：回调不是函数）
【发布时间】：2013-08-31 15:49:28
【问题描述】：

从 d3 和 cubism 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：回调不是函数”：

            <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() 位都在工作。

【问题讨论】：

从a pure D3 example 开始可能更容易，除非您打算使用立体主义特定的功能。
感谢 Lars 的评论...实际上，即使是折线图 bl.ocks.org/mbostock/3883245 也可以，因为我需要的 Horizon 图表没有什么特别之处。但似乎我只能从立体主义中的两种图表类型（水平和比较）中进行选择，而且我最终确实需要 cubism.js 擅长的每秒滚动功能，不是吗？
每秒滚动功能在this D3 tutorial中进行了解释。
Lars：是的，该教程描述了每秒滚动一次，但没有使用步长、大小、serverDelay，最初从 http json 请求巧妙地获取大范围，然后是小的增量更新等，已经处理你喜欢立体主义。是的，我很早就完成了该教程，但遇到了其他障碍，尽管并非无法克服 (stackoverflow.com/questions/18239407/…)。立体主义似乎仍然满足了我的大部分需求，我只需要看起来像地平线的图形更像线图。

标签： d3.js cubism.js

【解决方案1】：

您似乎将horizon.metric 与context.metric 混淆了。 context.metric 采用您定义的签名的函数。

【讨论】：

【解决方案2】：

好的，Scott Cameron 的观点让我克服了障碍。我也会在这里为未来的读者“回答”生成的工作代码。仍然没有我想要的最小示例，但消除了错误，我将在一个新问题中提出后续问题，以使其更小。

            <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>

【讨论】：

更新：我已经设法制作了一个更简单的示例（我发现删除了无关格式等更容易理解），从最后的 d3.select 部分中删除了 2 行，并删除了几行的 myContext.metric 部分，它从 URL 中获取 .json 文件，显示在此处（带有后续问题）stackoverflow.com/questions/18522085/… 希望对某人有所帮助。