2

Mike Bostock の cubism デモ ( http://bost.ocks.org/mike/cubism/intro/demo-stocks.html ) には、すべての水平線グラフの値を表示するカーソルがあります。さらに、カーソルテキストは時間軸の時点を示します。カーソル テキストが軸ラベルを覆い隠すと、ラベルが薄くなります。

私はd3.jsで同様のディスプレイに取り組んでいます(キュービズムではありません)。フェード部分を除いてすべて動作しています。開発者のウィンドウで CSS を検索し、ソース コードを検索しましたが (できる限り)、この偉業を達成するためにどのような魔法が使われているのかわかりません。SO「軸ラベル遷移」の質問も調べましたが、xaxis ラベル遷移のドットを接続できませんでした。

テキストに隠れていると、フェードイン/フェードアウトはどのように発生しますか?

更新: これが発生するイベント スクリプト領域を特定したと思います - 現時点では頭の中で少しだけです - このイベント リスナーが何をしているかを解読するのを手伝ってくれる人はいますか? 具体的には、以下のelse句の2番目のg.selectAllで、ここで使用されているデータ(d)は何ですか? このイベントが発生する原因は何ですか?

これは、表示の最もクールな部分 (ホライズン チャートの外側) です。これを理解したいと思います...

context.on("focus.axis-" + id, function(i) {
      if (tick) {
        if (i == null) {
          tick.style("display", "none");
          g.selectAll("text").style("fill-opacity", null);
        } else {
          tick.style("display", null).attr("x", i).text(format(scale.invert(i)));
          var dx = tick.node().getComputedTextLength() + 6;
          g.selectAll("text").style("fill-opacity", function(d) { return Math.abs(scale(d) - i) < dx ? 0 : 1; });
        }
      }
    });
4

2 に答える 2

0

Kevin Branigan の投稿と同じ答えですが、d3 スケールを使用して不透明度の値を計算します。

var tickFadeScale = d3.scale.linear().domain([10,15]).range([0,1]).clamp(true);
svg.selectAll('.x.axis .tick').style('opacity', function (d) {
 return tickFadeScale(Math.abs(d3.mouse(svg.node())[0] - x(d)));
}
于 2015-01-30T16:49:28.750 に答える