1

D3.js に急速に慣れる。私が気づいた 1 つの項目は、一連の円 (つまり、散布図) があり、それらにソース データから派生したツールヒントを追加すると、データをフィルター処理してそれらのツールヒントを更新する際に問題があるように思われることです。円を描き直します。データのフィルタリング時に呼び出されるコードの一部を次に示します。フィルタは、異なるが相関するグラフにマウスオーバーすると呼び出されることに注意してください。

circs = itemCircles.selectAll('circle')
    .data(filteredData)
    .attr("cy", function (d) { return scatY(d.sim_fnl_occ); } )
    .attr("cx", function (d) { return scatX(d.sim_curr_occ); } )
    .attr('r', 5)
    ;

circs.enter().append('circle')
    .data(filteredData)
    .attr("cy", function (d) { return scatY(d.sim_fnl_occ); } )
    .attr("cx", function (d) { return scatX(d.sim_curr_occ); } )
    .attr('r', 5)
    ;

circs.append("svg:title")
    .text(function(d) { console.log(d.sim_curr_occ); // looking good!
    return d.sim_curr_occ });// looking bad:(

コンソールには、新しくサブセット化されたデータの正しい値が書き込まれます。しかし、ツールチップ自体には誤ったデータがあります。実際、新しく描かれた円は元のツールチップを保持しているように見えます。円が適切に描画されることを指摘しておく必要があります。正しくないのは、svg:title を介したツールチップだけです。私が間違っていることについてのガイダンスはありますか？

4

1 に答える 1

1

enter()にタイトルを追加するだけでなく、にタイトルを追加しcircsます。

circs.enter().append('circle')
.data(filteredData)
.attr("cy", function (d) { return scatY(d.sim_fnl_occ); } )
.attr("cx", function (d) { return scatX(d.sim_curr_occ); } )
.attr('r', 5)
.append("svg:title")
.text(function(d) { 
  console.log(d.sim_curr_occ);
  return d.sim_curr_occ })
;
于 2012-07-19T11:22:36.053 に答える