2

我是 d3 初学者，我很抱歉承认我在简单地构建两个数组的叉积时遇到了麻烦。我实际上正在使用立体主义，做一些非常简单的事情：对于每种类型，产生一些聚合。

我的尝试：

var aggs = [
    {title: 'mean', metric: function(d) { return cube.metric("sum(" + d +  (value))").divide(cube.metric("sum(" + d + ")")); }},
    {title: 'count', metric: function(d) { return cube.metric("sum(" + d + ")").divide(step / 1e3); }}
]

d3.json(origin + "/1.0/types", function(types) {    
    d3.select("body").insert("div", ".bottom")
    .attr("class", "group")
    .selectAll(".typegrp")
    .data(types)
    .enter()
    .append("div")
    .attr("class", "typegrp")
    .selectAll("div")
    .data(aggs)
    .enter()
    .append("div")
    .attr("class","horizon")
    .call(context.horizon()
        .title(function(d) { return d.title; })
        .metric(function(d) { return d.metric(FOOOO); })
     );
});

我不明白的部分是“FOOOO”部分。从“内部”上下文（“aggs”中的行），我如何访问“外部”上下文（“类型”中的行）？

提前致谢。

编辑：下面是 nick 建议的完整工作示例。

var aggs = [
            {title: 'mean',  metric: function(d) { return cube.metric("sum(" + d + "(value))").divide(cube.metric("sum(" + d + ")")); }},
            {title: 'sum',   metric: function(d) { return cube.metric("sum(" + d + "(value))"); }},
            {title: 'count', metric: function(d) { return cube.metric("sum(" + d + ")"); }},
            {title: 'max',   metric: function(d) { return cube.metric("max(" + d + "(value))"); }},
            {title: 'min',   metric: function(d) { return cube.metric("min(" + d + "(value))"); }}
        ]

d3.json(origin + "/1.0/types", function(types) {    
    d3.select("body")
    .insert("div", ".bottom")
    .attr("class", "group")
    .selectAll(".typegrp")
    .data(types)
    .enter()
    .append("div")
    .attr("class", "typegrp")
    .each(function(type) {
        d3.select(this)
        .selectAll("div.horizon")
        .data(aggs)
        .enter().append("div")
        .attr("class","horizon")
        .each(function(agg) {
            d3.select(this)
            .call(context.horizon()
                .title(agg.title + " " + type)
                .metric(agg.metric(type))
            );
        });
    });
});
4

1 回答 1

2

我没有使用过立体主义，但我认为这里有两种选择：

  1. 简单的选择，如果您真的只有两个聚合指标 - 不要进行数据连接，只需单独添加它们。

    var typeGroups = d3.select("body").insert("div", ".bottom")
    .attr("class", "group")
  .selectAll(".typegrp")
    .data(types);

typeGroups.enter()
  .append("div")
    .attr("class", "typegrp");

typeGroups
  .append("div")
    .attr("class","horizon")
    .call(context.horizon()
        .title('mean')
        .metric(function(d) { return cube.metric( ... ); })
    );

typeGroups.
  .append("div")
    .attr("class","horizon")
    .call(context.horizon()
        .title('count')
        .metric(function(d) { return cube.metric( ... ); })
    );

  2. 稍微难一点的选择 - 在调用中加入 aggs 数组.each：

    typeGroups.enter()
  .append("div")
    .attr("class", "typegrp")
    .each(function(type) {
        d3.select(this).selectAll("div.horizon")
            .data(aggs)
          .enter().append("div")
            .attr("class","horizon")
            .each(function(agg) {
                d3.select(this)
                    .call(context.horizon()
                        .title(agg.title)
                        .metric(agg.metric(type))
                    );
            });
    });

    这使您可以在调用时访问该type变量context.horizon()。

于 2012-09-26T22:07:16.253 回答