在 HTML 表格中选择行以更新图表选择？答案

【问题标题】：Select row in HTML table to update chart selection?在 HTML 表格中选择行以更新图表选择？
【发布时间】：2013-05-09 11:08:48
【问题描述】：

如何设置 HTML+JS 表格，其中包含与图表相关联的数据（Flotr 或 D3）；我可以在哪里多选行，这将更新图表中显示的内容？ - 我可能会使用 AngularJS，所以他们的双向数据绑定可能会有所帮助......

例如：

<table>
    <thead>
         <tr><th>Vowel</th> <th>Amount</th></tr>
    <thead>
    <tbody>
         <tr> <td>A</td> <td>3</td> </tr>
         <tr> <td>E</td> <td>6</td> </tr>
         <tr> <td>I</td> <td>7</td> </tr>
         <tr> <td>O</td> <td>8</td> </tr>
         <tr> <td>U</td> <td>9</td> </tr>
    </tbody>
</table>

如果能够反向也很好，例如：在饼图上按 E 和 A 将刷新饼图 + 表格。

【问题讨论】：

当表格被点击时，你希望对图表进行什么样的更新？
这是一个相当广泛的问题。你试过什么，哪里没用？表格行上的鼠标向下和鼠标向上事件应该足够了..
conca：图表应该显示汇总信息，指的是我在表格中选择的数据；反之亦然。

标签： javascript data-binding angularjs d3.js html-table

【解决方案1】：

http://plnkr.co/edit/x1jGW0lqKyzV7EKsVAbJ?p=preview

这里是你如何做到这一点的例子。

一旦你创建了一个指令来将你的数据与 DOM 连接起来，那么通过模板处理数据模型很简单。

我重用了用于其他项目的 flot 集成指令。（这种“可重用性”是我喜欢 AngularJs 的原因。）

【讨论】：