Question

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

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

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

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

 .....

我将crossfilter imension和group设置如下，我认为是正确的。

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

修改这是html的名称是dc-table-column_2

<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

如果没有看到您尝试在Click或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

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

1 个答案: