68

基本的なバブルチャートの 1 つを試して、D3 を学ぼうとしています。最初のタスク: バブルをドラッグして、ドラッグしている間、バブルを一番上のオブジェクトにする方法を理解します。(問題は、D3 のオブジェクト モデルを DOM にマップすることですが、そこにたどり着きます...)

ドラッグするには、d3 が提供するコードを使用して d3 のドラッグ動作を呼び出すだけです。

var drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

よく働く。よく引きます。では、どうすれば一番上のアイテムになるのでしょうか? ここで「svg z-index」を検索すると、インデックスを変更する唯一の方法はオブジェクトを DOM 内でさらに下に移動することであることがすぐにわかります。わかった。個々のバブルには ID がないため、簡単にはできませんが、コンソールをいじって、これらのバブル オブジェクトの 1 つを次のように見つけることができます。

$("text:contains('TimeScale')").parent()

そして、次のようにして、それを含む svg 要素の最後に移動できます。

.appendTo('svg')

その後ドラッグすると、一番上のアイテムになります。ここまでは、完全に DOM 内で作業している場合は問題ありません。

しかし、私が本当にやりたいことは、特定のオブジェクト/バブルがドラッグされているときはいつでも自動的に起こるようにすることです. D3 は、ドラッグ プロセス中に実行するステートメントを埋め込むことができるモデルdragstart()と関数を提供します。dragend()また、D3 は、現在ドラッグしているオブジェクト/バブルのd3 のオブジェクト表現d3.select(this)にアクセスできる構文を提供します。しかし、それらが返す大量の配列を、操作できる DOM 要素への参照にきれいに変換するにはどうすればよいでしょうか。たとえば、それを svg コンテナーの最後に移動したり、フォーム送信などの DOM で他の参照を実行したりするにはどうすればよいでしょうか。 ?

4

3 に答える 3

31

SVG ドキュメント内のすべての DOM 要素には、ownerSVGElementそれが含まれる SVG ドキュメントを参照するプロパティがあります。

D3 のセレクションは、ネストされた配列に追加のメソッドを加えたものです。単一の DOM 要素を編集した場合は、次の.select()ようにして取得できます[0][0]。

var foo = d3.select(someDOM);

// later, where you don't have someDOM but you do have foo
var someDom = foo[0][0];
var svgRoot = someDom.ownerSVGElement;

ただし、使用している場合は、d3.select(this)既にthisDOM要素であることに注意してください。アンラップするためだけに D3 セレクションでラップする必要はありません。

于 2012-04-26T20:56:10.033 に答える
11

追加するときに必要に応じて、ID とクラスを個々の要素に割り当てることができます。

node.append("circle.bubble")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return fill(d.packageName); })
.attr("id", function(d, i) { return ("idlabel_" + i)})
.attr("class", "bubble")
;

次に、selectAll("circle.bubble") を使用してクラスで選択するか、ID で選択して次のように属性を変更できます。

var testCircle = svg.select("#idlabel_3")
.style("stroke-width", 8);
于 2012-04-26T18:12:33.790 に答える