0

CoffeeScript クラスでd3.js Streamgraphを使用しています。マウスオーバーでパスの色が変わり、ツールチップが表示されるように調整しました。

ここで、ツールチップ ロジックの一部を別の関数に取り出したいと思います。

実行コンテキストをどちらか一方に調整できますが、両方を渡す方法がわかりません。

class Graph

    render: ->
        ...
        dataArea.enter()
          .append("path")
              .on("mouseover", @onMouseOver)            # Option 1 - Pass path context
              .on("mouseover", @onMouseOver.bind(@))    # Option 2 - Pass class context

    onMouseOver: (data) ->
        d3.select(this).attr("class", "")   # 1.  Depends on path context (to adjust styling)
        @tooltipHelper(data)                # 2.  Depends on class context (which holds helper function)

    tooltipHelper: (data) ->
        ...

以前、クリック イベントに関する同様の質問について、@loganfsmyth から大きな助けを得ました。これは、次の行に沿った答えを示唆しています。

.on("mouseover", (d) => @onMouseOver(d))

onMouseOver: (data) ->
  d3.select(data.target).attr("class", "")

残念ながら、これはうまくいかないようです。したがって、この質問の別の言い方は、「マウス オーバー イベントの event.target に相当するものは何ですか?」ということになるかもしれません。

@meetamit からのこの回答も関連しています。クロージャーの外側で宣言された変数に (Graph のインスタンス) を代入することでこれを回避することを提案してthisいますが、これはすべてをクロージャーに入れるため、CoffeeScript では不可能だと思います。

手伝ってくれますか？

4

1 に答える 1

1

このような場合、グローバル変数を使用して、d3.event必要なすべての情報にアクセスできます。

于 2013-07-09T12:56:03.283 に答える