dc.js 显示过滤后的对象数

Question

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

我有一组这样的对象

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

现在我正在使用 numberDisplay 来尝试显示 complaincestate="complaint" 的对象数量
但它似乎显示了不同值的数量，例如。 2 因为有“不投诉”和“投诉”。我应该怎么做才能解决？

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

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

这是我写的代码。我试过使用 .filter 但它似乎并没有像我想的那样工作。

如果有人能指出正确的方向或 link 一篇文章，将不胜感激！

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

我目前有 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();

    })

Answer 1

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

If the group is a groupAll then its .value() will be displayed. This is the recommended usage.

However, if it is given an ordinary group, the numberDisplay will show the last bin's value, after sorting with the ordering function. numberDisplay defaults the ordering function to sorting by value, so this will display the largest value if the values are numeric.

我猜你看到的是最后一个 bin 的值。

可能最简单的方法是创建一个假组，returns 只有您想要的元素：

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

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

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

然后就可以了。

Example fiddle.

dc.js 显示过滤后的对象数

dc.js Show filtered count of objects

dc.js

angular