web-dev-qa-db-ja.com

D3 SVGオブジェクトに関連するDOM要素にアクセスする方法は？

basic bubblecharts のいずれかを試してD3を学ぼうとしています。最初のタスク：バブルをドラッグし、ドラッグ中に一番上のオブジェクトになる方法を見つけます。 （問題はD3のオブジェクトモデルをDOMにマップすることですが、私はそこに行きます...）

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

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

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

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

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

_.appendTo('svg')
_

それをした後にドラッグすると、一番上のアイテムになります。これまでのところ、非常に良い、ifあなたは完全にDOM内で作業しています。

しかし、私が本当にやりたいのは、与えられたオブジェクト/バブルがドラッグされるたびにそれが自動的に起こるようにすることです。 D3は、ドラッグプロセス中に必要な処理を実行するステートメントを埋め込むことができるdragstart()およびdragend()関数のモデルを提供します。 D3は、現在ドラッグしているオブジェクト/バブルのd3のオブジェクト表現にアクセスできるd3.select(this)構文を提供します。しかし、どのようにすれば、それらを返すことができるDOM要素への参照に返される大規模な配列をきれいに回すことができますか？ ？

domsvgvisualizationdata-visualizationd3.js
54
XML

selection.node（）method を使用して、選択によって表されるDOM要素に到達することもできます。

var selection = d3.select(domElement);

// later via the selection you can retrieve the element with .node()
var elt = selection.node();
173
Tom Dunn

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

D3の選択は、追加のメソッドを含むネストされた配列です。単一のDOM要素を.select() edしている場合は、_[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)を使用している場合、thisはすでにisDOM要素であることに注意してください。単にアンラップするためにD3選択でラップする必要はありません。

31
Phrogz

追加するときに必要に応じて、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);
11
Elijah