如何使用dc.js在图表上方添加标签？

Question

当我选择条形图中的任何特定字段时，所有图形都会相应更改。

我想在图表上方引入一个标题，该标题应显示当前在图表和计数中显示的数据。

那么我应该在代码中做出哪些更改？

var data = [{
    "city": "New York",
        "neighborhood": "N/A",
        "hits": 200
}, {
    "city": "New York",
        "neighborhood": "Brooklyn",
        "hits": 225
}, {
    "city": "New York",
        "neighborhood": "Queens",
        "hits": 1
}, {
    "city": "San Francisco",
        "neighborhood": "Chinatown",
        "hits": 268
}, {
    "city": "San Francisco",
        "neighborhood": "Downtown",
        "hits": 22
}, {
    "city": "Seattle",
        "neighborhood": "N/A",
        "hits": 2
}, {
    "city": "Seattle",
        "neighborhood": "Freemont",
        "hits": 25
}];
var pieChart = dc.pieChart("#pieChart"),
    rowChart = dc.rowChart("#rowChart");
var ndx = crossfilter(data),
    cityDimension = ndx.dimension(function (d) {
        return d.city;
    }),
    cityGroup = cityDimension.group().reduceSum(function (d) {
        return d.hits;
    }),
    neighborhoodDimension = ndx.dimension(function (d) {
        return d.neighborhood;
    }),
    neighborhoodGroup = neighborhoodDimension.group().reduceSum(function (d) {
        return d.hits;
    });

pieChart.width(200)
    .height(200)
    .slicesCap(4)
    .dimension(cityDimension)
    .group(cityGroup);
pieChart.filter = function() {};

rowChart.width(500)
    .height(500)
    .dimension(neighborhoodDimension)
    .group(neighborhoodGroup);

dc.renderAll();

<div id="pieChart"> </div>
<div id="rowChart"> </div>

Answer 1

要显示当前过滤器，您可以在图表中使用span class =＆＃39;过滤器＆＃39;`class='reset' and，如annotated stock example中所示

要显示已过滤的记录数，您可以使用dataCount widget或numberDisplay小部件。

除此之外，您还必须实现显示本身，可能会挂钩filtered event以确定过滤器何时更改，并使用例如更改您自己的div d3或jQuery。