d3.js - 生成後に D3 を使用してデータに関連付けられた要素にアクセスする

Question

私はデータセットを持っています。各アイテムは D3 を使用して svg rects にリンクされています。

var bars = svg_content.selectAll("rect")
    .data(dataset);
    .enter()
    .append("rect")

生成が完了したと仮定します (つまり、.enter() プロセスが完了し、四角形が生成されました)。

そのデータセットの特定のインデックスに関連付けられた四角形 (たとえば、3 番目のデータにリンクされた四角形) にアクセスするにはどうすればよいでしょうか?

score 2 · Accepted Answer

var third = selection.filter(function(d, i) { return i == 2; });

// Equivalently
var third = selection.select(function(d, i) { return i == 2; });

score 1 · Accepted Answer

これを行うにはいくつかの方法があります。通常、d3 では、選択範囲内からデータにアクセスする傾向があります。したがって、次のように表示されます。

var bars = svg_content.selectAll("rect")
    .data(dataset);
    .enter()
    .append("rect")
    .attr('class', function(d) { return d.myName; });

ここで d は、特定の四角形に関連付けられているデータセットのデータ項目です。そのコードは、各データ項目の「myName」プロパティを使用して各 rect を分類します。

これらの矩形の 1 つを特別に配置したいとしましょう。と 1 つmyName='aName'。その長方形を選択し、関連付けられたデータに基づいて「変換」属性を設定します。

svg.content.selectAll('rect.aName')
    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + 20 ')'; })

どちらの場合も、アイテムのインデックスにもアクセスでき、関連する場合は親インデックスにもアクセスできることに注意してください ( を使用function(d,i,j) {...})

最後に、一般的にはお勧めしませんが、単体テスト用に、要素に関連付けられたデータに .xml を使用して直接アクセスしました__data__。たとえば、jQuery の場合:

$.find("svg rect.aName")[0].__data__;

ここでクイックフィドルで遊ぶことができます

2 に答える 2