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

Question

当我 select 条形图中的任何特定字段时，所有图形都会相应变化。

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

那么我应该对我的代码进行哪些更改？

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

为了显示当前过滤器，您可以在图表中使用 spans 和 class='reset' andclass='filter'`，如 annotated stock example

要显示筛选的记录数，您可以使用 dataCount widget or the numberDisplay 小部件。

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

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

How to add label above the graph using dc.js?

dc.js