0

ここにいくつかのコードがあります。不適切な名前の変数があり、間違っています。元の例には円しかなかったため、円が選択されていますが、現在はグループがあります。ただし、このコードは現時点では正しく機能します。私が期待するように、それは正方形と円を描きます。

コンソールを使用すると、「円」が表示Array[3]されますが、要素が何であるか、またはそのタイプがわかりません。その起動以来、svg 要素が作成されていないため、どのように 3 が可能でしょうか?

とにかく、私は実際にどのサークルと呼ばれるべきか疑問に思っていました. 「g」ですべて選択すると、同じ効果が得られるようです。selectAll が選択を実行しようとしていて、要素が 0 であると推測していますが、何らかの形で引き続き動作するか、selectAll が実際に svg を返す可能性がありますが、その場合、新しい変数を作成するのはなぜですか。また、なぜ例と私がそれについてデータを作成しているのか正確にはわかりません。サークルは実際にデータを設定した内部 d3 オブジェクトを返していますか? svg や dom と何か関係がありますか? なぜselectAllを選択してデータを呼び出しているのか、私は混乱しています。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
</style>

<script src="http://d3js.org/d3.v3.js"></script>
<script>


(function() {

var svg = d3.select('body').append('svg').attr('width', 900);

var circle = svg.selectAll("circle")
    .data([32, 57, 293]);

circle.enter()
.append("g")
.call(function(gs) {
    gs.append("rect").attr("width", 20).attr("height", 20).attr("x", String);
    gs.append("circle").attr("cy", 90).attr("cx", String).attr("r", Math.sqrt);
})
.attr('class', 'test');
circle.exit().remove()

})();

</script>
</body>
4

1 に答える 1

0

circle現在、3 つの SVGGElements またはs を保持しており、それぞれが例で.append"g"された円と四角形を保持しています。

MDN から:

g 要素は、オブジェクトをグループ化するために使用されるコンテナーです。g 要素に適用される変換は、そのすべての子要素に対して実行されます。適用された属性は子要素に継承されます。さらに、後で要素で参照できる複雑なオブジェクトを定義するために使用できます。

selectAll("some-container")その名前に一致する要素を返すか、新しい要素を作成して返します。https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAllを参照してください。

これらを 27 行目に追加して、円の x 値を確認してください。

alert("x1: " + d3.select(circle.selectAll("circle")[0][0]).attr("cx"));
alert("x2: " + d3.select(circle.selectAll("circle")[1][0]).attr("cx"));
alert("x3: " + d3.select(circle.selectAll("circle")[2][0]).attr("cx"));
于 2013-01-11T21:39:43.467 に答える