1

我对 d3 很满意，但只是开始了解过渡/动画。我正在尝试以M Bostock 的 Marey 火车图表为基础，并为孟买西部铁路系统制作交互式图表。块页面在这里。就添加线路提示文本、根据区域对站名进行颜色编码等方面，我做了一些细微的改变。

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

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

  1. 有两个单独的 csv 文件（一个用于所有，另一个用于快速）。在 d3.csv 函数之外有一个“点击”监听器，并在选择时调用适当的 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 容器之外包含了表单单选按钮，它将底部 X 轴从 SVG 容器中取出。一旦涵盖了过渡部分，我将参加

4

1 回答 1

1

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

  • 加载 CSV 时呈现默认选择。
  • When the selection changes, filter the data to display like you already do. 您可能希望在某处保留对当前选定数据的引用。请记住，您的过滤器功能可以是任意复杂的，即您可以检查您喜欢的所有条件。
  • 选择所有火车路径并传入新数据。您将需要提供一个关键函数（ 的第二个参数.data()，请参见此处）以确保数据和行正确匹配。
  • 处理进入/更新/退出选择。首先没有过渡，然后添加它们。

您希望如何进行转换取决于您，但您可以让例如进入和退出选择淡入淡出。

selection.enter().append("path").attr("opacity", 0).transition().attr("opacity", 1);
selection.exit().transition().attr("opacity", 0).remove();
于 2013-09-26T18:02:20.397 回答