Question

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

我不理解的部分是＆＃34; FOOOO＆＃34;部分。来自内心的＆＃39;上下文（＆＃39; aggs＆＃39;中的行），我如何访问＆＃39;外部＆＃39;上下文（＆＃39;类型＆＃39;中的行）？

提前致谢。

编辑：这是一个完整的工作示例，如下面的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))
            );
        });
    });
});

Answer 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( ... ); })
    );

稍微更难的选项 - 在.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))
                    );
            });
    });

这使您可以在致电type时访问context.horizon()变量。

立体主义，d3数据加入

1 个答案: