0

私はこのフィドルで私の問題を最小限の実例にコンパイルしました:

HTML:

<div id='test'></div>

JS:

var data = d3.range(10);
var svg = d3.select('#test').datum('hello').append('svg');
var path = svg.append('g')
  .append('path')
    .data([data])
    .attr('class','line');

alert(svg.select('.line').data());

このコードは、私が期待していたパスの選択ではなく、選択にhello関連付けられたデータであるアラートを出します。div

この動作が見られるのはなぜですか?

4

2 に答える 2

4

ドキュメントに詳述されているように、元の選択 (つまり).select()のデータを作成中のサブ選択 (つまり) にバインドするという副作用があるため、この動作が見られます。つまり、このコードを実行すると、 への呼び出しに引数がなくても、選択した要素にバインドされたデータが変更されます。svg.line.data()

これを と比較すると、この副作用.selectAll()はなく、以前にバインドしたデータを持つ要素が実際に選択されます。

于 2013-10-18T19:21:46.603 に答える
2

アラートを次のように変更します。

alert(svg.selectAll('.line').data());

と の間には微妙ではあるが重要な違いがselectありselectAll、前者は親のデータをselect'ed の子に適用します。実際、ここでは明らかではありませんがselect、アラート ステートメントで を使用すると、以前に設定した範囲データが消去されます。問題を理解するには、この jsFiddle のコメントを参照してください: http://jsfiddle.net/5wZnL/7/。

于 2013-10-18T19:22:37.220 に答える