在d3.js中过滤CSV记录根据用户输入输入/更新

Question

我对d3感到满意，但只开始了解过渡/动画。 我想以M Bostock's Marey chart for trains为基础，为孟买西部铁路系统制作交互式图表。 The bl.ocks page is here。我已经对线添加了提示文字，按照区域的颜色编码站名等进行了细微的更改。

孟买西部列车系统有快速列车和慢列车。要求是，根据用户输入，图表显示所有列车或仅显示快速列车。快车是黑色的。 csv中的列'type'指示列车快（F）或慢（S）。

我无法想出适应过渡框架的最佳方式。到目前为止，我已经想到了以下选项。

1. 有两个独立的csv文件（一个为所有和其他只为快速）。在d3.csv函数外有一个'on click'监听器，并在选中时调用相应的d3.csv加载器。这可能是原油，并不那么优雅

2. 这里已经有一个过滤器，只选择SF列车。但我如何合并只有S或两个SF取决于点击监听器。

   var train = svg.append("g") 
       .attr("class", "train") 
       .attr("clip-path", "url(#clip)") 
   .selectAll("g") 
       .data(trains.filter(function(d) { return /[SF]/.test(d.type); })) 
   //.data(trains) 
   .enter().append("g") 
       .attr("class", function(d) { return d.type; }); 
   

赞赏，如果一些人可以用适当的和优雅的方式帮助将这一过渡

编辑：我知道，现在，我已经包括SVG容器外部形式单选按钮，这是puching SVG容器中的底部X轴。一旦过渡部分被覆盖，我将参加它

Answer 1

你对我已经有了一个好的开始。基本模式是这样的。

• 加载CSV时呈现默认选择。
• 当选择更改时，过滤数据以便像您已经完成的那样显示。您可能想要在某处保留对当前选定数据的引用。请记住，您的过滤功能可以是任意复杂的，即您可以检查所有您喜欢的条件。
• 选择所有列车路径并传入新数据。您将需要提供一个关键功能（.data()的第二个参数，请参阅here）以确保数据和行匹配正确。
• 处理输入/更新/退出选择。首先没有转换，然后添加它们。

你想要做什么转换取决于你，但你可以例如输入和退出选择淡入淡出如此。

selection.enter().append("path").attr("opacity", 0).transition().attr("opacity", 1); 
selection.exit().transition().attr("opacity", 0).remove();