3

この前の質問と同じように、mpld3 にスライダーを実装しようとしています。

これを行うために、ドラッグ可能なポイントの例から構築しようとしています。次のコードがどのように機能するかを理解するのに少し苦労しています。

function dragged(d, i) {
      d[0] = obj.ax.x.invert(d3.event.x);
      d[1] = obj.ax.y.invert(d3.event.y);
      d3.select(this)
        .attr("transform", "translate(" + [d3.event.x,d3.event.y] + ")");
    }

特に、thisこの文脈で何を指すか。当初はwhere (関数の先頭)のd3.select(this)ようなものに置き換えることができると考えていました。しかし、私が作成したこのノートに示されているように、これは機能しません。(コードの 2 番目の部分では、赤い点をドラッグできません)。d3.select("#"+foo)foo = this.props.iddraw()

私がやろうとしていることが明確でない場合は、このノートブックを見てください。赤い四角 (スライダー) を水平方向にドラッグできるプラグインを作成しました。私がやりたいことは、赤い点をドラッグして青い点の位置を変更することです。だから私は次のようなことをしたい：

function dragged(d, i) {
      d[0] = obj.ax.x.invert(d3.event.x);
      sliderPosition = obj.ax.x(d[0]);
      targetPosition = obj.ax.x(-d[0]); // inverted sign
      d3.select("#redsquare")
        .attr("transform", "translate(" + [sliderPosition,sliderObj.ax.y(d[1])] + ")");
      d3.select("#bluedot")
        .attr("transform", "translate(" + [targetPosition,targetObj.ax.y(d[1])] + ")");
    }

この単純な例の意図した動作は、青い点がドラッグされたときに赤い四角形の反対方向に移動することです。"#redsquare"問題は、 andの代わりに何を入れる"#bluedot"かです。

どうもありがとう。

4

1 に答える 1

1

私はこれを行うハッキーな方法を知っています。の代わりに、次のように、要素配列d3.select(this)で関心のある特定の要素を見つけることができます。obj

      d3.select(obj.elements()[0][i])

しかし、もっときれいな方法があるはずです。

于 2014-09-10T19:34:38.253 に答える