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

我对d3很满意，但只是开始了解过渡/动画。 我试图以此为基础，为孟买西部铁路系统制作一张互动图表。我已经做了一些细微的改变，比如为线路添加提示文字，根据区域对站点名称进行颜色编码等

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

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

有两个独立的csv文件（一个用于所有人，另一个仅用于fast）。在d3.csv函数外部有一个“点击”侦听器，并在选中时调用相应的d3.csv加载程序。这可能是粗俗的，不那么优雅

这里已经有一个只选择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容器外包含了表单单选按钮，它将底部X轴从SVG容器中折叠出来。一旦涉及到过渡部分，我将关注它

您已经拥有的对我来说是一个良好的开端。基本模式是这样的

• 加载CSV时呈现默认选择
• 当选择发生更改时，请过滤数据以像以前一样显示。您可能希望在某个位置保留对当前选定数据的引用。记住，你的过滤函数可以是任意复杂的，也就是说，你可以检查你喜欢的所有条件
• 选择所有列车路径并传入新数据。您需要提供一个键函数（第二个参数是

  .data（）

  ，请参阅），以确保数据和行正确匹配
• 处理输入/更新/退出选择。首先不使用过渡，然后添加过渡

具体如何进行转换取决于您自己，但您可以像这样使输入和输出选择淡入淡出

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

---

你已经拥有的对我来说是个好的开始。基本模式是这样的

• 加载CSV时呈现默认选择
• 当选择发生更改时，请过滤数据以像以前一样显示。您可能希望在某个位置保留对当前选定数据的引用。记住，你的过滤函数可以是任意复杂的，也就是说，你可以检查你喜欢的所有条件
• 选择所有列车路径并传入新数据。您需要提供一个键函数（第二个参数是

  .data（）

  ，请参阅），以确保数据和行正确匹配
• 处理输入/更新/退出选择。首先不使用过渡，然后添加过渡

具体如何进行转换取决于您自己，但您可以像这样使输入和输出选择淡入淡出

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

---

谢谢你，拉尔斯。我会试试这个然后回来谢谢Lars。我会试试这个然后回来。