Question

我是javascript和dc.js的新手，目前很难创建一个只能查看数据列中特定值的numberDisplay。

我创建了一个包含许多不同图表的信息中心，但我目前仍然停留在最终的数字显示上，这些显示也将与其他图表一起过滤。

我的数据包含两个与下面相似格式的字段，我希望仅为SLA＆＃34; 2天＆＃34;创建一个百分比数字显示。

所以我希望numberDisplay能够返回＆＃34; 2天＆＃34;在整个组内，所以它会显示30％（10/30）

我已经搜索并尝试了不同的解决方案，但我迄今为止唯一能做的就是显示所有SLA的总和。

var data = [{
"sla": "2 days",
    "team": "hr",
    "hits": 7
}, {
"sla": "2 days",
    "team": "finance",
    "hits": 1
}, {
"sla": "2 days",
    "team": "finance",
    "hits": 2
}, {
"sla": "3-4 days",
    "team": "hr",
    "hits": 5
}, {
"sla": "3-4 days",
    "team": "hr",
    "hits": 4
}, {
"sla": "5 days",
    "team": "finance",
    "hits": 3
}, {
"sla": "5 days",
    "team": "hr",
    "hits": 8
}];

SLA中有大约6-7种不同的可能条目，我目前只想创建其中2或3个的数字显示。

这样做最快/最简单的解决方案是什么？

我创建了一个基本的jsfiddle作为示例：https://jsfiddle.net/kevinelphick/owx2L1wt/2/?utm_source=website&utm_medium=embed&utm_campaign=owx2L1wt

Answer 1

我认为使用普通缩减并使用"fake group"来提取您想要的单个值会更加清晰。

这是一个包装器，它接受一个组和一个键，并返回一个groupAll风格的组，其中value函数返回该键的bin：

function choose_bin(group, key) {
  return {
    value: function() {
      return group.all().filter(kv => kv.key === key)[0].value;
    }
  }
}

为了计算百分比，我们还需要总点击次数;我们可以使用dimension.groupAll()来获取：

var allHits = slaDimension.groupAll().reduceSum(d => d.hits);

我假设您不希望这些数字被饼图过滤（因为它只会以0％或100％的方式显示）。因此我们使用相同的维度和组，因为a group does not observe its own dimension's filters。

我们将根据包装函数定义sla_2days：

var sla_2days = choose_bin(slaGroup, '2 days')

最后，我们定义valueAccessor的{{1}}来计算百分比：

numberDisplay

你小提琴的叉子：https://jsfiddle.net/gordonwoodhull/sa2mL8wh/3/

Answer 2

由于戈登的评论和本网站上的一些进一步研究的指导，我设法找到了解决方案：

我在小组中添加了一些功能：

var slaGroup1 = all.reduce(
  function(p, v) {
    p.count += v.hits;
    p.slasum += (v.sla == "2 days" ? v.hits : 0);
    p.slaPercent = p.count ? p.slasum/p.count : 0;
    return p;
    console.log(p.failures);
  },
  function(p, v) {
    p.count -= v.hits;
    p.slasum -= (v.sla == "2 days" ? v.hits : 0);
    p.slaPercent = p.count ? p.slasum/p.count : 0;
    return p;
  },
  function() {
    return {
      count: 0,
      slasum: 0,
      slaPercent: 0
    };
  }
);

然后我的NumberDisplay值访问器：

slaNumberDisplay
  .group(slaGroup1)
  .formatNumber(d3.format(".1%"))
  .valueAccessor(function (x) {return x.slaPercent;});

我确定这是一种更有活力的方法吗？如果我想为不同的标准创建多个数字显示？我可以在组外创建函数，组是否使用括号内设置的条件调用函数？我也可以从函数中删除百分比，只需在值Accessor中执行此操作。

dc.js numberdisplay过滤百分比

2 个答案: