javascript - svgの外側のボタンからd3のノードをクリックする

Question

D3を使用して力指向グラフを作成し、通常のdivでノードのIDを表示しました。divでIDがクリックされたノードを強調表示する必要があります。ノードのIDを検索し、通常のJavaScriptを使用してクリックしようとしましたが、機能しません。

Answer 1

より一般的には、ユーザーが要素Aを操作する場合、関連する要素Bをどのように選択 (および変更) しますか? これを達成する方法はたくさんありますが、ここでは 3 つの一般的な方法を紹介します。

オプション 1. 1 対 1 のマッピングの場合は、ID で選択します。

A の各要素が B に対応する要素を 1 つだけ持つ場合、aをd3.select("#foo")選択するなど、関連する要素 B を ID で選択できます<div id="foo">。

このアプローチでは、 selection.attrを使用してBの各要素の ID を設定する必要があります。これは、データに固有の一意の識別子 (やなど) がある場合に最も簡単です。d.named.id

b.attr("id", function(d) { return d.id; });

次に、要素AをクリックしてBの対応する要素の塗りつぶしの色を変更できるようにするには、 selection.onを使用してクリック リスナーを登録し、id で選択します。

a.on("click", function(d) {
  d3.select("#" + d.id).style("fill", "red");
});

識別子は一意かつ有効でなければなりません。たとえば、ID は数字ではなく文字で始まる必要があり、スペースを含めることはできません。データに一意の識別子がまだない場合は、次のようにインデックスから生成できます。

b.attr("id", function(d, i) { return "b-" + i; });

そして後で、要素Aが同じ順序であると仮定すると、

a.on("click", function(d, i) {
  d3.select("#b-" + i).style("fill", "red");
});

データ配列を繰り返し処理して、一意の識別子を生成することもできます。

オプション 2。1 対多のマッピングの場合は、クラスごとに選択します。

a などのクラス "foo" の要素を選択するには<div class="foo">、 と言いd3.selectAll(".foo")ます。A のいずれかの要素がBの複数の要素に対応する場合は、このアプローチを使用します。たとえば、学生間の関係を示す力指向のグラフがある場合、各学生の学年に基づいてノードに色を付け、凡例を使用して各学年の表示を切り替えることができます。

前のアプローチと同様に、selection.attrを使用して「class」属性を設定できます。d.typeこの場合、クラス属性は一意ではないため、データ内のプロパティに由来する可能性があります。

b.attr("class", function(d) { return d.type; })

データのさまざまなカテゴリ属性に対して複数の凡例がある場合は、より具体的にクラス名のプレフィックスを付けることもできます。学年の例を続けるには:

b.attr("class", function(d) { return "year-" + d.year; })

class 属性を設定すると、以前に設定されたクラスが置き換えられるため、要素に複数のクラスを適用する場合は、「class」属性を設定するときにそれらをスペースで結合する必要があります。

次に、要素AをクリックしてBの対応する要素の塗りつぶしの色を変更できるようにするには、 selection.on を使用してクリック リスナーを登録し、クラスごとに選択します。

a.on("click", function(d) {
  d3.selectAll("." + d.type).style("fill", "red");
});

ここではselectではなくselectAllを使用していることに注意してください。これは、最初の要素だけでなく、対応するすべての要素を選択したいからです。繰り返しますが、class 属性が有効であることを確認する必要があります。

オプション 3. それ以外の場合は、データを選択してフィルター処理します。

前の 2 つのアプローチでは、ID とクラスが生成されるため、ブラウザはBの要素にインデックスを付けて効率的に選択できます。少数の要素の場合、またはより一般的な選択方法が必要な場合は、「id」または「class」属性の指定を省略し、selection.filterによって手動で選択するだけです。

A の da各要素に関連付けられたデータムと、B の各要素に関連付けられたデータムを呼び出しましょうdb。daあとは、 matchのときに true を返す式を定義するだけですdb。たとえば、タイプでフィルタリングしたい場合:

a.on("click", function(da) {
  b.filter(function(db) { return da.type == db.type; }).style("fill", "red");
});

最初の 2 つのオプションが推奨されますが、レンジ スライダーがあり、量的変数に基づいてフィルター処理する場合など、手動フィルター処理が役立つ場合もあります。

Answer 2