表示されている2つのSVGのそれぞれでユーザーがポイントを選択する必要がある小さなUIを構築しています。
これらのポイント座標は、SVGの下に表示されます。enter()andexit()メソッドを使用したD3のデータバインディングを使用してこれを実現したいと思います。ただしenter()、バインドされた要素でメソッドを呼び出しても、D3はポイント座標を表示する部分を常に更新するとは限らないようです。exit()ただし、データを削除する場合、メソッドは機能します。
これがメインコードです：
function showPoints() {
var coordinatesElements = d3.select('#coordinates').selectAll('.point').data(points);
coordinatesElements.enter().append('div').classed('point', true)
.text(function (d) {
var textParts = [];
if (d.firstSvg) { textParts.push('first : '+JSON.stringify(d.firstSvg)); }
if (d.secondSvg) { textParts.push('second : '+JSON.stringify(d.secondSvg)); }
return textParts.join(' - ');
})
.append("span")
.classed('removeCalibrationPoint', true)
.html(" X")
.on('click', function(d, i) {
points.splice(i, 1);
showPoints();
});
coordinatesElements.exit().remove();
}
問題を示すJSBinフィドルを作成しました。
最初の問題は、HTMLに空divのクラスがあることですpoint。これはによって選択され、.selectAll('.point')データの最初の要素が表示されなくなります。
2番目の問題は、更新の選択を処理していないことです。場合によっては、新しいデータを追加するのではなく、既存のデータを変更します。次のコードは、更新選択のデータのテキストを更新します。
coordinatesElements.text(function (d) {
var textParts = [];
if (d.firstSvg) { textParts.push('first : '+JSON.stringify(d.firstSvg)); }
if (d.secondSvg) { textParts.push('second : '+JSON.stringify(d.secondSvg)); }
return textParts.join(' - ');
});
ここで完全なデモ。更新選択にのみテキストを設定することでコードを少し簡略化したことに注意してください。入力選択から追加された要素は更新選択にマージされるため、2回行う必要はありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加