dc.js显示过滤的对象数

如何解决dc.js显示过滤的对象数

我是dc.js的新手。而且我还没有找到解决我问题的方法。

我有一个这样的对象数组

[{
 devicename: "device1",operatingSystem: "android",complainceState: "complaint"
 ...
},{
 devicename: "device2",complainceState: "noncomplaint"
 ...
},...]

现在，我正在使用numberdisplay尝试显示出投诉状态=“ complaint”的对象数量
但是它似乎显示出不同值的数量，例如。 2因为存在“无投诉”和“投诉”。我该怎么办？

const complaincy = ndx.dimension((d: any) => d.complianceState)
      const complaincyGroup = complaincy.group()

      numberdisplay
      .formatNumber(d3.format(".1s"))
      .dimension(complaincy)
      .group(complaincyGroup)

这是我写的代码。我尝试使用.filter，但它似乎无法像我想的那样工作。

如果有人能指出我正确的方向或链接文章，将不胜感激！

编辑：这是我的问题的更多背景信息。

我目前有2个图表和1个数字计数器。

这是dc.js的完整代码


var deviceChart = dc.pieChart("#devices")
    var numberRowChart = dc.rowChart("#complaincy")
    var numberdisplay = dc.numberdisplay("#complaincyNumber")

this.tenantService.getDevicesD3(this.selectedTenant).then(data => {
      const ndx = crossfilter(data);

      //devices by os doughnut chart
      const deviceDimension = ndx.dimension((d:any) => d.operatingSystem);
      const deviceGroup = deviceDimension.group();

      deviceChart.ordinalColors(["#00a2ed","#3DDC84"]);
      deviceChart
      .radius(100)
      .width(160)
      .height(160)
      .dimension(deviceDimension)
      .group(deviceGroup)
      .innerRadius(50)
      .label((d) => "")
      .legend(dc.htmlLegend().container("#deviceLegend").highlightSelected(true))
      

      //non complaint number counter
      const complaincy = ndx.dimension((d: any) => d.complianceState)
      const complaincyGroup = complaincy.group()
      
      numberdisplay
      .formatNumber(d3.format(".1s"))
      .dimension(complaincy)

      //{
      //   value: () => complaincyGroup.all()
      //  .filter(({key}) => key == ‘complaint’)[0]
      //}
      // This solution suggested by gordon returns the following error in 
      //   console. ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'value' of undefined
      .group(complaincyGroup);
      


      //number row chart
      numberRowChart
      .dimension(complaincy)
      .group(complaincyGroup)

      dc.renderAll();
      dc.redrawAll();

    })

解决方法

该行为记录在NumberDisplay documentation的顶部：

如果组是groupAll，则将显示其.value（）。这个是推荐的用法。

但是，如果给它一个普通的组，numberDisplay将显示使用排序功能排序后，最后一个bin的值。 numberDisplay默认将排序功能设置为按值排序，因此如果值为数字，则将显示最大值。

我想您正在看到最后一个bin的值。

执行所需操作的最简单方法可能是创建一个伪造的groupAll，它仅返回所需的元素：

numberDisplay.group({
    value: () => complaincyGroup.all()
       .filter(({key}) => key == ‘complaint’)[0]})

注意：您的代码中拼写错误；如果您这样拼写访问器

  const complaincy = ndx.dimension(d => d.complainceState)

然后它起作用。

Example fiddle。