javascript - 立体主义，d3 数据连接

Question

我是 d3 初学者，很遗憾地承认我在简单地构造两个数组的叉积时遇到了麻烦。我实际上正在使用 Cubism，做一些非常简单的事情:对于每种类型，生成一些聚合。

我的尝试:

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”中的行)，如何访问“外部”上下文(“types”中的行)？

提前致谢。

编辑:下面是尼克建议的完整工作示例。

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))
            );
        });
    });
});

Answer 1

我没有用过 Cubism，但我认为这里有两种选择:

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. 稍微困难一点的选择 - 在 .each 调用中加入 aggs 数组:

   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))
                       );
               });
       });
   

   这使您可以在调用 context.horizo​​n() 时访问 type 变量。