是否可以通过使用 dc.js 选择表格元素来过滤数据？

Question

是否可以通过 dc.js 选择表格元素来过滤数据？

我正在使用自己的数据处理 nasdaq 示例。

在数据表中，我有自己的名为 name 的列：

.columns([
                    function (d) {
                        return d.date;
                    },
                    function (d) {
                        return d.name
                    },

 .....

我的交叉过滤器尺寸和组设置如下，我认为是正确的。

    var name = ndx.dimension(function (d) {
            return d.name
        });
        var nameGroup = name.group();

编辑 这是名称为 dc-table-column_2 的 html

<table class="table table-hover dc-data-table dc-chart">
<thead>
<tbody>
<tr class="dc-table-group info">
 <tr class="dc-table-row">
 <td class="dc-table-column _0">05/01/2012</td>
 <td class="dc-table-column _1">12/31/9999</td>
 <td class="dc-table-column _2">Eric</td>
 </tr>
</tbody>

当有人单击表格中的名称时，我想根据此名称过滤所有图表并在另一个 div 中呈现一些元数据（与 d3 或交叉过滤器无关）。我找不到实现这一目标的示例。我试图使用 d3s onClick() 事件，但没有成功。有人可以指出我的解决方案吗？

Answer 1

如果没有看到您尝试在哪里实现点击或 DOM，我会建议类似以下用于实现 onClick 的一般结构：

d3.selectAll("DOM element associated with names in the table").on("click", function () {

    //this line to store clicked item value for use later 
    var value = this.value; 

    d3.select("ids of charts").
    set properties to filter here using stored value

    d3.select("unrelated DOM id").text(stuff you want rendered);

或者，您可以只使用 html onclick 属性来处理非 d3 相关的内容，并使用 d3.selectAll().on("click") 来过滤您的表格。

在这里查看似乎是相关的问题：

Redrawing histograms with Crossfilter and D3

或者在这里我做了一些概念上类似的事情：

http://www.ryansloan.org/energapp/app.html