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

Question

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

我正在使用我自己的数据处理纳斯达克示例。

在数据表中我有自己的名称列:

.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 或 crossfilter 无关)。我找不到实现这一点的例子。我试图使用 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);

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

有关似乎相关的问题，请参阅此处:

Redrawing histograms with Crossfilter and D3

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

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