d3.js - 过滤 d3.js sankey 图的数据

Question

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

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

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

来源、目标、价值、类别

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

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

Answer 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 文件。

Answer 2

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

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

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

谢谢。