javascript - dc.js 中的 numberDisplay 显示行图表中值的总和

标签 javascript d3.js dc.js crossfilter

我有一个简单的图表,其中只有三个条形。我想使用 dc.numberDisplay() 方法将条形值的总和显示为数字。我得到的只是其中一根柱子的值。重点是根据选择显示总数。例如,我选择 A 和 B,总数将显示 13。这是 jsfiddle我的代码如下:

HTML

<body>
    <div id='Chart'>
        <h4 id = "total">Number: </h4>
    </div>
</body>

JS

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
},{
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group().reduceCount(function (d) {
    return +d.value;
});


dc.rowChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {
    return d.key + "  " + d.value;})
    .ordering(function (d) {
    return -d.value});

dc.numberDisplay("#total")
    .valueAccessor(function(d){return +d.value})
    .group(YDimension);   

dc.renderAll();

编辑:多亏了戈登,现在显示了正确的总和,但在选择条形图时它并没有改变。现在,致力于此。

最佳答案

为您的 numberDisplay 组使用 XDimension.groupAll(),而不是 YDimension。这是一个特殊的组,只有一个 bin,包含所有过滤后的记录。

https://github.com/square/crossfilter/wiki/API-Reference#dimension_groupAll

关于javascript - dc.js 中的 numberDisplay 显示行图表中值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25209533/

相关文章:

javascript - d3 如何在发布请求中正确传递请求正文?

javascript - Meteor 存放陨石包的位置

javascript - 分离、排序的 d3 圆圈沿 X 轴显示

javascript - d3 点击事件交互

javascript - DC.js 范围/焦点图表行为不正确

javascript - 如何在选择下拉选项时触发Vue中的功能

javascript - 使用 zombie.js 检查多个类

d3.js - D3 可缩放树形图更改子访问器

javascript - 交叉过滤器和D3 : Filter by group AND dimension

javascript - 意外的画笔过滤行为