Question

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

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

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

有两个单独的csv文件（一个用于所有文件，另一个用于快速文件）。在d3.csv函数外部有一个'on click'监听器，并在选中时调用相应的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容器外面添加了表单单选按钮，它正在从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();

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

1 个答案: