1

从 d3 和 cubism API 页面上找到的任何代码到更改内容以配合我需要他们做的事情，我都经历了一段痛苦的时光……

我正在尝试按照此处列出的 Horizo​​n 图表的步骤https://github.com/square/cubism/wiki/Horizo​​n 但我没有 Cube 或 Graphite 数据源。

所以我试图从 mbostock 的答案中创建一个最小的示例指标，这里 使用其他数据源用于 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() 位正在工作。

4

2 回答 2

2

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

            <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>
于 2013-08-28T15:32:34.073 回答
1

看起来您将Horizo​​n.metric与context.metric混淆了。它具有context.metric您定义的签名的功能。

于 2013-08-28T14:46:44.450 回答