d3.js - d3 散布図のデータを d3 選択範囲外で参照/呼び出す方法

Question

d3 散布図があり、1 つのレコード (円) に追加されたデータの値をコードで後で呼び出すために取得する方法を知りたいです。次のデータがあるとします。

ID  X   Y
A   1   1
B   2   2
C   3   3

レコード B の X 値を取得するにはどうすればよいですか?

誰もそれを行う方法を知っていますか?

どうも

Answer 1

データの添付方法によっては、さらにコードを表示する必要がある場合があります。しかし、あなたが次のようなものを持っていると仮定すると

var circle = svg.selectAll("circle").data(myArrayOfDataObjects)
  .enter().append("circle");

作成した DOM 要素に ID またはクラスを割り当てることができます。

circle.attr("id", function(d) { return "dataRow" + d.ID; });

これで、d3、プレーン JS、または選択したライブラリを使用して、後で DOM 要素のハンドルを取得できます。D3 はそのデータを__data__DOM 要素のプロパティとして添付するため、それを参照してデータを取得できます。D3 は、.datum()この値を取得するメソッドも提供します。

var myDataRow = d3.selectAll("#dataRowB").datum();
var xValue = myDataRow.X;

または、プレーンな JavaScript では:

var myDataRow = document.getElementById("#dataRowB").__data__;
// etc