过滤 d3.js sankey 图的数据答案

【问题标题】：Filtering data for d3.js sankey diagrams过滤 d3.js sankey 图的数据
【发布时间】：2013-09-05 08:21:11
【问题描述】：

我正在尝试让 d3.js Sankey 可视化根据类别过滤数据集。

我正在使用 d3.csv 方法输入数据，如本例所示 - http://bl.ocks.org/timelyportfolio/5052095

不过，我想上传一个包含四列的数据集 -

来源、目标、价值、类别

我的目标是拥有能够在类别之间切换的可视化。因此，每个 Sankey 可视化仅代表一个特定类别。然后用户可以从下拉菜单切换到另一个。

这可以使用当前的 d3.csv 输入法吗？

【问题讨论】：

所以您需要帮助来进行可视化或调整 csv 文件的内容以便添加类别列？

标签： d3.js sankey-diagram

【解决方案1】：

这行得通吗？

d3.csv("file.csv", function(data) {
    [...]

    // Called each time there is an action on the dropdown menu
    function updateGraph() {
         // Select only data that are tagged with a certain category
         var dataset = data.filter(function(d) { return d.category == selectedCategory; });
         // Update graph visualization
    }
}

这样您就不必每次都重新加载 csv 文件。

【讨论】：

谢谢你回答了我的问题。但是，我有另一个关于 selectedCategory 函数的查询。如何在下拉选择中更改它。抱歉，我还在通过 js 和 d3 学习。干杯。
为此我会推荐 jQuery，尤其是如果您使用一些 Bootstrap 组件（see dropdown here，如果您是 Web 应用程序的新手，这是一个不错的选择（这是我所采取的方法，而且确实如此）帮助我快速完成工作）。您必须检查下拉菜单的哪个选项处于活动状态。

【解决方案2】：

这是第二部分的一个很长的方法，但是，根据您的类别创建多个 html/php 和 csv 文件，然后在每个 html/php 文件中添加以下代码。如果您有很多类别，此方法将是额外的工作。

<a href="Category 1.php">Category 1</a> 
<a href="Category 2.php">category 2</a>

如果您按照尝试的方式找到了解决方案，那么如果可能，请更新您的答案。这会很有帮助。

谢谢。

【讨论】：