8

したがって、非常に単純なd3チュートリアルに従うときに問題が発生します。基本的に、現在のsvgサークル要素にデータをバインドしてenter.appendを呼び出すことにより、SVGサークル要素を追加しようとしています。以下に示すように：

var svg =d3.select("body").selectAll("svg");
var circle = svg.selectAll("circle");
var w=window.innerWidth;
console.log(circle);
circle.data([500,57,112,200,600,1000]);


circle.enter().append("circle")
    .attr("cy",function(d) {
        return (d)
        })
    .attr("cx", function(i){
        return (i*100)
    })
    .attr("r", function(d) {
        return Math.sqrt(d);
        })

これは、3つの新しい円要素を追加するようです（すでに3つ作成しているため）。ただし、これらの3つの新しい円要素を追加する代わりに、次のエラーが発生します。

Uncaught TypeError：Object [object SVGCircleElement]、[objectSVGCircleElement]、[objectSVGCircleElement]にはメソッド'enter'がありません

私は段落で本質的に同じことをしました、そしてそれはうまくいくようです：

var p =d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return "I'm number " + d + "!"; });

 //Enter    
 p.enter().append("p")
.text(function(d) { return "I'm number " + d + "!"; })
.style("color", function(d, i) {
 return i % 2 ? "#000" : "#eee";
});

ただし、SVG要素を追加しようとすると、同じエラーが発生し続けます。

構文エラーか何かがあるはずなのに、コードを5兆回調べても、何も見つかりません。

どんな助けでも大歓迎です、そしてあなたの時間を前もって感謝します。

アイザック

4

1 に答える 1

16

あなたはそれ自体の代わりにenterの結果を求めたいのです。circle.datacircle

var circle = svg.selectAll("circle");
circle.data([500,57,112,200,600,1000]).enter().append("circle");

pの戻り値を変数に格納することにより、例でこれを正しく行いましdataた。p一方、あなたのcircle例では、の戻り値を変数に格納d3.select.selectAllしています。circle

于 2012-07-26T19:05:49.377 に答える