3

データの戻り率を複合線と面グラフとして表示するd3.jsビジュアライゼーションが機能しています（http://anf.ucsd.edu/tools/data_return_rates/）。

x軸は時間、y軸はパーセントデータリターン率です。ビジュアライゼーションの上部にあるさまざまなボタンをクリックして、データセット（解析されたJSONファイルのみ）を切り替えることができます。

生データのプロットに加えて、必要な最小データ戻り率（85％）を定義する単純な線を追加したいと思います。これは、データの戻り率がこの最小値/しきい値を超えているかどうかをユーザーが判断するのに役立つ、純粋に視覚的な補助です。データセットのd3.min（）メソッドとd3.max（）メソッドを使用して、この'minima'行（2ポイントのみ）のx値（時間）を計算します。y値は単なる整数（85）です。

var min_data_return = [ 
      {   
      "readable_time": d3.min(data, function(d) { return d.readable_time; }),
      "value": 85
      },  
      {   
      "readable_time": d3.max(data, function(d) { return d.readable_time; }),
      "value": 85
      }   
  ]

（すべてが正常にプロットされることを確認するために、他のいくつかの変換を行います）

さて、この最小線を視覚化に追加する前に、次のことを行って面積と折れ線グラフを作成しました。これは機能しました。

svg.select("path.area").data([data]);
svg.select("path.line").data([data]);

スクリプトの後半には、他にもいくつかのプロットコードがあります。

svg.select("path.area").attr("d", area);
svg.select("path.line").attr("d", line);

私が読んだすべてのd3.jsの例では、複数の行を作成するには、データ配列にプロットするすべてのデータセットを含める必要があると述べています。したがって、上記の例では、次のようになります。

svg.select("path.line").data([data]);

になる：

svg.select("path.line").data([data, min_data_return]);

そして、これはうまくいくはずです。ただし、そうではありません。データセットの線は以前と同じようにプロットされていますが、min_data_returnの線は表示されていません。

私が間違っていることについて何か考えはありますか？

ここでの要点：https ：//gist.github.com/2662793

要旨で、133行目から140行目を見てください（コメント付きの文字列OPTIONを検索してください）。これらは、これを機能させることに関連する唯一の行です。完全を期すために、スクリプト全体を要点に入れました。

前もって感謝します！

4

1 に答える 1

5

リファレンス ラインとデータ ラインの両方を一緒に描画しようとする代わりに、それらを別々に描画することを検討してください。

svg.append("svg:path")
    .attr("class", "minline")
    .attr("clip-path", "url(#clip)");   
...
svg.select("path.minline").data([min_data_return]);
...
svg.select("path.minline").attr("d", line);

JSfiddle の完全な例: http://jsfiddle.net/qAHC2/6/

于 2012-05-13T15:51:39.950 に答える