1

私は d3 に慣れていますが、トランジション/アニメーションを理解し始めたばかりです。私は、M Bostock の列車用マレー チャートをベースとして、ムンバイ西部鉄道システム用のインタラクティブなチャートを作成しようとしています。ブロックスのページはこちら。路線のヒント テキストの追加、ゾーンごとの駅名の色分けなど、わずかな変更を加えました。

ムンバイ西部鉄道システムには、高速列車と低速列車があります。要件は、ユーザー入力に基づいて、チャートがすべての列車または高速のみを表示することです。快速は黒色。csv の「タイプ」列は、列車が速い (F) か遅い (S) かを示します。

移行フレームワークに対応する最善の方法を考えることができません。これまでのところ、次のオプションを考えていました。

  1. 2 つの個別の csv ファイルがあります (1 つはすべてのファイル用、もう 1 つは高速用のみ)。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 コンテナーの外にフォーム ラジオ ボタンを含めて、SVG コンテナーの下部の X 軸を押し出していることを知っています。トランジションの部分がカバーされたら、私はそれに注意を払います

4

1 に答える 1

1

あなたがすでに持っているものは、私にとって良いスタートのように見えます. 基本パターンはこれ。

  • CSV のロード時にデフォルトの選択をレンダリングします。
  • 選択が変更されたら、既に行っているようにデータをフィルターして表示します。現在選択されているデータへの参照をどこかに保持したい場合があります。フィルタ関数は任意に複雑なものにすることができることを覚えておいてください。つまり、好きな条件をすべてチェックできます。
  • すべての列車の経路を選択し、新しいデータを渡します。データと行が正しく一致していることを確認するには、キー関数 ( の 2 番目の引数、ここ.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 に答える